@charset "UTF-8";
/* CSS Document */
@import url("base.css"); /* base stylesheet */

.sp {
	display:block;
}

.pc {
	display:none;
}

.ex_link {
	padding-right:22px;
	background: url('../images/common/ex_link.png') no-repeat right center;
}

#wrapper {
	overflow: hidden;
	position: relative;
	padding-bottom:50px;
}

.container {
	margin:0 auto;
}

/* header
--------- --------- --------- --------- --------- */
header { 
	width:100%;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
header > .container {
	width:96%;
	padding:8px 2%;
	height:50px;
	overflow: visible;
}
header h1 {
	float:left;
	width:130px;
}
header h1 img {
	width:100%;
	height:auto;
	display: block;
	padding:0;
	margin:0;
}

/* SPメニュートリガー
--------- --------- --------- --------- --------- */
.trigger-box {
    position: absolute;
    right: 0;
    top: 0;
}
.menu-trigger, .menu-trigger span {
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box;
}
.menu-trigger {
    position: relative;
    width: 50px;
    height: 66px;
}
.active .menu-trigger span:nth-of-type(1) {
    width: 28%;
    -webkit-transform: translate3d(0px, 4px, 0) rotate(45deg);
    transform: translate3d(0px, 4px, 0) rotate(45deg);
}
.menu-trigger span:nth-of-type(1) {
    top: 20px;
}
.active .menu-trigger span:nth-of-type(2) {
    -webkit-transform: translate3d(-1px, 0, 0) rotate(-45deg);
    transform: translate3d(-1px, 0, 0) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
    top: 26px;
}
.active .menu-trigger span:nth-of-type(3) {
    width: 29%;
    -webkit-transform: translate3d(4px, -4px, 0) rotate(45deg);
    transform: translate3d(4px, -4px, 0) rotate(45deg);
}
.menu-trigger span:nth-of-type(3) {
    top: 32px;
}
.menu-trigger span.menu-text {
    width: 100%;
    height: auto;
    left: 2px;
    bottom: 15px;
    background: none;
    line-height: 1.0;
    text-align: center;
    font-size: 10px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-weight:bold;
    color:#222;
}
.menu-trigger span {
    position: absolute;
    left: 17px;
    width: 20px;
    height: 2px;
    background-color: #222;
    border-radius: 1px;
    color:#222;
}

/* nav
--------- --------- --------- --------- --------- */
nav {
	width:100%;
	height:auto;
	padding:0;
	margin:66px 0 0 0;
	display: block;
	position:absolute;
	top:0;
	left:101%;
	z-index:9999;
	overflow:visible;
	border-top: solid 1px #CCC;
	background:#FFF;
	transition: all .3s;
	box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
}
nav.active {
	left:0;
}
nav ul li {
	line-height: 1.0;
	text-align: center;
}
nav ul li.weather {
	display: block;
	overflow: hidden;
	font-family: 'Josefin Sans', sans-serif;
	font-size:12px;
	width:170px;
	height:50px;
	margin:0 auto;
	position: relative;
}
nav ul li.weather #today_weather,
nav ul li.weather #tomorrow_weather {
	background:#FFF;
	height:38px;
	padding-top:12px;
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
nav ul li > div {
    background: #DDD;
    height: 0;
    overflow: hidden;
    transition: height 0.2s 0.1s;
}
nav ul li.active > div {
	height: 70px;
}
.weather p,
.weather img {
	display: inline-block;
	vertical-align: top;
}
.weather img {
	margin:0 2px;
	width:44px;
}
.weather p span.day {
	color:#666666;
	width:78px;
	height:14px;
	padding:0 0 2px 0;
	text-align: center;
	border-bottom:solid 1px #CCC;
	display: block;
}
.weather p span.place {
	color:#00698C;
	display: block;
	float:left;
	width:78px;
	padding:3px 0 0 0;
	text-align: center;
}
.weather p b.temp_max {
	color:#D80000;
	display: block;
	float:left;
	font-weight:normal;
	font-size:13px;
}
.weather p b.temp_min {
	color:#0085B2;
	font-weight:normal;
	font-size:13px;
}
.weather p b span {
	font-size:11px;
}
nav > ul li.search {
	display: block;
	overflow: hidden;
	width:320px;
	height:40px;
	margin:0 auto;
}
nav > ul li.search form {
	margin-top:8px;
	position: relative;
	padding:0;
}
nav > ul li.search input[type="text"] {
	border-radius: 19px;
	border:solid 1px #CCC;
	padding:5px 48px 5px 12px;
	width:258px;
}
nav > ul li.search input[type="text"]:focus {
	border-radius: 16px;
	outline: 0;
	border-color: orange;
}
#clearBtn {
	display: none;
	position:absolute;
	right:26px;
	top:3px;
}
#clearBtn img {
	width:20px;
	height:auto;
}
#clearBtn.active {
	display: block;
}
.searchBtn {
	position:absolute;
	right:5px;
	top:2px;
}
.searchBtn img {
	width:22px;
	height:auto;
}
nav > ul li.tel {
	font-family: 'Josefin Sans', sans-serif;
	color:#D93600;
	font-size:24px;
	font-weight:400;
	width:260px;
	height:auto;
	display: block;
	padding:10px 0;
	margin:0 auto;
	text-align: center;
}
nav > ul li.tel a {
	color:#D93600;
	text-decoration: none;
}
nav ul li.tel span {
	font-family: 'Josefin Sans', "游ゴシック", YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size:14px;
	line-height:1.2;
	font-weight:400;
	margin:4px auto 0 auto;
	display: block;
	overflow: hidden;
}
nav ul li.pc {
	display: none;
}
nav ul.gnav {
	clear:both;
	width:100%;
}
nav ul.gnav li {
	height:auto;
}
nav ul.gnav li.sp {
	display: block;
}
nav ul.gnav li a,
nav ul.gnav li span {
	width:100%;
	padding:10px 0;
	border-top:solid 1px #CCC;
	display: block;
	vertical-align: middle;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	color:#333;
	cursor: pointer;
}
nav ul.gnav li span {
	position: relative;
}
nav ul.gnav li span i{
	position: absolute;
	right: 15px;
	transition: transform 0.3s;
}
nav ul.gnav li.active span i{
	transform: rotate(-180deg);
}
nav p#menulist_close {
	border-top:solid 1px #CCC;
	padding:12px 0 12px 0;
}
nav p#menulist_close a {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-weight:bold;
	background:#CCC;
	border-radius: 6px;
	width:90%;
	display: block;
	margin:0 auto;
	text-align: center;
	text-decoration: none;
	color:#333;
	padding:10px 0;
	cursor:pointer;
}

/* crumb
--------- --------- --------- --------- --------- */
ul.crumb {
	display:block;
	text-align:left;
	padding-left:1%;
	font-size:12px;
	padding-top:5px;
}

ul.crumb li {
	display:inline-block;
}

ul.crumb li:last-child {
	margin-bottom:30px;
}

/* foot
--------- --------- --------- --------- --------- */
.to_top {
	position:relative;
	margin:0 auto;
	width:100%;
	z-index:98;
	height:0;
	overflow: visible;
}
.to_top p {
	width:100%;
	height:0;
	overflow: visible;
	padding-right:0;
	margin:0 auto;
	text-decoration: right;
}
.to_top p a {
	display: inline-block;
	float:right;
	padding:19px 10px 7px 10px;
	text-decoration: none;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	color:#111;
	background:#FFF;
	position:relative;
	transition: 0.15s;
}
.to_top p a:after {
	content:"";
	position:absolute;
	top:4px;
	left:50%;
	margin-left:-6px;
	height:0;
	width:0px;
	border:solid 6px transparent;
	border-bottom:solid 6px #111;
	display: block;
	transition: 0.15s;
}

.to_top p a:hover {
    color: #999;
    transform: translate(0,-6px);
}

.to_top p a:hover:after {
    border-bottom:solid 6px #999;
}

.diagnose {
	position:relative;
	clear:both;
	width:100%;
	border-top:solid 7px #FFBF00;
	background:#FFF;
	display: block;
	box-shadow: 0 -2px 2px rgba(0,0,0,0.2);
	height:56px;
	overflow: hidden;
	z-index:99;
}
.diagnose_inner {
	width:350px;
	padding:6px 0;
	display: block;
	margin:0 auto;
}
.diagnose_inner .sp {
	display: inline-block;
}
.diagnose_inner .pc {
	display: none;
}
.diagnose_inner p {
	font-size:15px;
	font-weight:bold;
	margin:12px 0;
	display: inline-block;
	line-height: 1.0;
	vertical-align: top;
}
.btn_diagnose {
	color:#CCC;
	display: inline-block;
	vertical-align: top;
}
.btn_diagnose a {
	padding:10px 12px 10px 32px;
	background: url('../images/common/icon_checked.png') no-repeat 12px 10px #D9A300;
	background-size:16px;
	border-radius: 6px;
	margin-left:10px;
	margin-bottom:0;
	color:#FFF;
	text-decoration: none;
	font-weight:bold;
	font-size:17px;
}
.sp_footer_inner {
	display: block;
}
.pc_footer_inner {
	display: none;
}

.sp_footer_inner ul li a {
	background: #8C0000;
	color:#FFF;
	display: block;
	width:90%;
	text-decoration: none;
	padding:10px 5%;
	border-top: solid 1px #660000;
	position:relative;
	font-family: Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
.sp_footer_inner ul li a:after {
	position:absolute;
	content:">";
	font-family: sans-serif;
	display: block;
	top:10px;
	right:5%;
	color:#FFF;
}
.sp_footer_inner ul li a.sub_menu_trigger {
	position:relative;
}
.sp_footer_inner ul li a.sub_menu_trigger:after {
	position:absolute;
	content:"-";
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size:20px;
	display: block;
	top:4px;
	right:5%;
	color:#FFF;
}
.sp_footer_inner ul li.closed a.sub_menu_trigger:after {
	content:"+";
	top:6px;
}
li ul.sub_menu {
	height:auto;
	width:100%;
	overflow: hidden;
	display: none;
}
li ul.sub_menu li a {
	text-decoration: none;
	display: block;
	width:82%;
	padding:10px 9%;
	background:#660000;
	color:#FFF;
	border-top: solid 1px #400000;
}
li ul.sub_menu li:last-child a {
	border-bottom: solid 1px #400000;
}

footer {
	position:fixed;
	bottom:0;
	width:100%;
}
.copy {
	font-family: 'Josefin Sans', sans-serif;
	background:#000;
	color:#FFF;
	padding:16px;
	text-align: center;
	line-height: 1.0;
}


section.white {
	padding:30px 0;
}
section.red {
	background:#8C0000;
	padding:30px 0;
}
section.yellow {
	background:#D9A300;
	padding:30px 0;
}
section.green {
	padding:45px 0;
}

section .section_inner {
	width:94%;
	padding:0 3%;
	margin:0 auto;
}
section.yellow .section_inner {
	width:96%;
	padding:0 2%;
}

section .section_inner h2 {
	font-size:19px;
	text-align: center;
}
section.red .section_inner h2,
section.yellow .section_inner h2 {
	color:#FFF;
}
section .section_inner h2 span {
	font-family: 'Josefin Sans', sans-serif;
	font-size:14px;
	font-weight:normal;
	display: block;
	text-align: center;
	margin-top:4px;
}
section.red .section_inner h2 span,
section.green .section_inner h2 span {
	color:#EAC300;
}
section.yellow .section_inner h2 span {
	color:#B20000;
}

.container.nf_box{
    padding: 60px 0;
}

.container.nf_box > h1{
    text-align: center;
    margin: 30px 0 25px;
    font-size: 30px;
    color: #222;
    font-weight: bold;
}

#not_found h1{
	text-align: center;
}

#not_found .btn_next{
	text-align: center;
}

#not_found .btn_next a{
    background: #EEE;
    padding: 15px 10%;
    margin: 30px 0;
    display: inline-block;
    text-decoration: none;
    color: #222;
    border-radius: 5px;
    font-size: 16px;
    min-width: 140px;
    box-sizing: border-box;
}

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

.diagnose {
	z-index:101;
}	
footer{
	background:#003040;
	margin-top:100px;
}
.sp_footer_inner {
	display: none;
}
.pc_footer_inner {
	width:85%;
	padding:40px 0 0 15%;
	margin:0 auto;
	display: block;
}
footer ul li a {
	color:#AAA;
	text-decoration: none;
	width:auto;
}

footer ul li.fnav1 img{
	display: block;
	margin:0 0 30px 0;
	width:160px;
	height:auto;
}

footer .pc_footer_inner > ul {
	display: inline-block;
	width:49%;
	vertical-align: top;
}
footer .pc_footer_inner > ul:first-child {
	display: block;
}

footer ul li ul.f_menu li {
	font-weight:normal;
	font-size:14px;
	padding-left:12px;
	display: block;
	overflow: hidden;
	line-height: 1.9;
	position: relative;
}
footer ul li ul.f_menu li:after {
	content:"-";
	position:absolute;
	left:2px;
	top:0;
	line-height: 1.9;
	display: block;
	width:20px;
	height:auto;
	font-weight:bold;
	color:#AAA;
}
footer ul li ul.f_menu li:first-child {
	font-size:15px;
	padding-left:0;
}
footer ul li ul.f_menu li:first-child a {
	color:#FFF;
	background: none;
}
footer ul li ul.f_menu li:first-child:after {
	content:"";
}
footer ul li ul.f_menu li:last-child {
	padding-bottom:26px;
}
.copy {
	padding:10px;
}

}

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

.pc_footer_inner {
	width:96%;
	padding:40px 0 40px 4%;
}
footer .pc_footer_inner > ul {
	display: inline-block;
	width:31%;
	vertical-align: top;
}
footer .pc_footer_inner > ul:first-child {
	display: inline-block;
}

}

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

.sp {
	display:none;
}
.pc {
	display:block;
}
.container {
	width:1036px;
}
header {
	height:100px;
	padding:0;
	z-index: 31;
	position: relative;
	-webkit-transform: translate(0);
	transform: translate(0);
}
header .container {
	width:1036px;
	padding:0;
	height:100px;
	overflow: inherit;
}
header h1 {
	width:180px;
}
header h1 img {
	margin:17px 15px 0 5px;
	width:160px;
}
nav {
	width:836px;
	height:100px;
	box-shadow: none;
	padding:0;
	margin:0;
	display: block;
	float:right;
	position:relative;
	left:0;
	border: none;
}
nav.active {
	width:836px;
	left:0;
}
nav ul li {
	text-align: left;
}
nav ul li.weather {
	float:left;
	margin:0 0 0 24px;
}
nav > ul li.search {
	width:170px;
	height:50px;
	float:left;
	margin:0 0 0 16px;
}
nav > ul li.search form {
	margin-top:14px;
}
nav > ul li.search input[type="text"] {
	width:108px;
}

nav > ul li.tel {
	font-size:22px;
	height:22px;
	padding:19px 16px 9px 16px;
	margin:0;
	float:left;
	text-align: right;
}
nav ul li.tel span {
	font-size:12px;
	margin:4px 0 0 8px;
	display: inline-block;
	vertical-align: top;
}
nav ul li.btn_contact {
	width:156px;
	height:50px;
	display: inline-block;
	margin:0;
}
nav ul li.btn_contact a {
	color:#FFF;
	border-radius: 5px;
	background: #D91204;
	padding:10px 0;
	text-decoration: none;
	width:100%;
	margin:10px 0 0 0;
	display: block;
	text-align: center;
}
nav ul.gnav {
	width:836px;
	display: table;
}
nav ul.gnav > li {
	display: table-cell;
	height:50px;
	width:25%;
}
nav ul.gnav li.sp {
	display: none;
}
nav ul.gnav li:nth-child(2) {
	width:30%;
}
nav ul.gnav li:nth-child(4) {
	width:20%;
}
nav ul.gnav > li > a,
nav ul.gnav li span {
	padding:17px 0 18px 0;
	height:15px;
	border:none;
}
nav ul.gnav > li > a:hover,
nav ul.gnav li:hover span {
	padding:17px 0 14px 0;
	border-bottom:solid 4px #D91204;
}
nav ul.gnav li span i{
	display: none;
}

nav ul li > div {
    position: fixed;
    left: 0;
    width: 100%;
    background: #003040;
}

nav ul li.active > div {
	height: 0;
}

nav ul li:hover > div {
    height: 60px;
}

nav ul li.active:hover > div {
	height: 60px;
}

nav ul li > div > .container {
    height: auto;
}

nav ul li > div > .container > li {
    display: inline;
}
nav ul li > div > .container > li > a {
    display: inline-block;
    padding: 0 30px 0;
    line-height: 60px;
    border: none;
    width: auto;
    font-weight: bold;
    color:#FFF;
}

nav ul li > div > .container > li > a:hover {
    color: #D9A300;
}
.diagnose_inner .sp {
	display: none;
}
.diagnose_inner .pc {
	display: inline-block;
}
.diagnose_inner {
	width:1026px;
	padding:6px 0 6px 10px;
}
.diagnose_inner p {
	font-size:18px;
	margin:12px 0 12px 8px;
}
.diagnose_inner span {
	display: inline-block;
	line-height: 1.3;
	vertical-align: top;
	margin:4px 16px 4px 8px;
}
.btn_diagnose a {
	padding:10px 20px 10px 60px;
	background: url('../images/common/icon_checked.png') no-repeat 30px 6px #D9A300;
	background-size:24px;
}

.pc_footer_inner {
	width:996px;
	padding:40px 20px 30px 20px;
}
footer .pc_footer_inner > ul {
	display: inline-block;
	width:auto;
}
footer .pc_footer_inner > ul:first-child {
	display: inline-block;
}

footer ul li.fnav1,
footer ul li.fnav2,
footer ul li.fnav3,
footer ul li.fnav4,
footer ul li.fnav5 {
	display: inline-block;
	float:none;
	width:212px;
	margin:0;
	padding:0;
	vertical-align: top;
}
footer ul li.fnav2 {
	width:130px;
}
footer ul li.fnav3 {
	width:240px;
}
footer ul li.fnav4 {
	width:225px;
}
footer ul li.fnav5 {
	width:172px;
}
footer ul li.fnav1 img{
	margin:25px 0 0 0;
}

section .section_inner {
	width:976px;
	padding:0 30px;
}
section.yellow .section_inner {
	width:996px;
	padding:0 20px;
}

}


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

.to_top p {
	width:1200px;
}

}