@charset "utf-8";

/*----------------------------------------*----------------------------------------
composition
----------------------------------------*----------------------------------------*/

html { font-size: 10px; }
body {
	color: #333;
	font-family: "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background-color:#f7f7f7;		/*ページ全体の背景色*/
	font-size: 1.5rem;
	line-height: 1.5;
}
@media all and (max-width: 767px) {
body{ padding-top:50px; }
}

a img:hover{
	opacity:0.6;
	transition:.2s linear;
}

/*----------------------------------------*----------------------------------------
header
----------------------------------------*----------------------------------------*/

#header .container { position: relative; }

@media all and (max-width: 767px) {
#header {
	position:fixed;
	top:0;
	width:100%;
	padding-bottom: 10px;
	background:#f7f7f7;
	border-bottom:#000 2px solid;
	z-index:9999;
	height:50px;
	}
#header .container { padding-top: 10px; }
}

@media screen and (min-width: 768px) {
#header {height:113px;}
#header .container { padding-top: 20px; }
}

/*----------------------------------------
logo
----------------------------------------*/

#header .logo {
	background: url(../img/logo.gif) no-repeat left center;
	background-size: contain;
}

@media all and (max-width: 767px) {
#header .logo {
	height: 30px;
	width: 176px;
}
#header .logo a { height: 34px; }
}

@media screen and (min-width: 768px) {
#header .logo {
	height: 73px;
	width: 428px;
}
#header .logo a { height: 73px; }
}

/*----------------------------------------
description
----------------------------------------*/

@media all and (max-width: 767px) {
#header .description { display: none; }
}

@media screen and (min-width: 768px) {
#header .description { font-size: 1.2rem; }
#header .description--full {
	background: #f2f2f2;
	padding: 1px 0;
}
#header .description--inline { margin-top: 5px; }
}

/*----------------------------------------
contact
----------------------------------------*/

@media all and (max-width: 767px) {
#header .tel{
	display:block;
	position:absolute;
	top:13px;
	right:70px;
	width:57px !important;
	height:25px !important;
	 }
#header .mail{
	display:block;
	position:absolute;
	top:13px;
	right:0;
	width:66px;
	height:25px;
	 }
#header .header_card{display: none;}
}

@media screen and (min-width: 768px) {
/*
電話番号だけの場合、#header .containerの背景に電話番号画像を指定
#header .container {
	background: url(../img/header_tel.gif) no-repeat right bottom;
}
*/

/* 電話番号＋ボタンの場合 */

#header .contact {
	background: url(../img/header_contact.gif) no-repeat right top;
	bottom: 0;
	height: 67px;
	position: absolute;
	width: 344px;
}
.grid-1100 #header .contact { right: 0px; }
#header .contact a {
	height: 67px;
	position: absolute;
	right: 0;
	top: 0;
	width: 344px;
}
#header .contact .tel{
	display: none;
	 }
#header .contact .mail{
	display: none;
}


#header .header_card {
	right: 360px;
	bottom: 0;
	height: 67px;
	position: absolute;
	width: 253px;
}
}

/*----------------------------------------
toggleBtn
----------------------------------------*/

@media screen and (min-width: 768px) {
#header .toggleBtn { display: none; }
}

.globalNav a {
	display: block;
	text-decoration: none;
	transition: all .2s linear;
}

/*----------------------------------------
common
----------------------------------------*/

@media all and (max-width: 767px) {
#globalNav .container {
	display:none;
	padding: 0;
	background:#e85888;
	}
#globalNav a {
	padding: 10px;
	position: relative;
}
#globalNav a:before {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -.5em;
	font-family: "FontAwesome";
	line-height: 1;
	content: "\f105";
}
#globalNav .menu--active > a { text-decoration: underline; }
#globalNav .dropdown:not(.dropdown-pc) > a:before {
	content: "\f107";
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
}

/* menu--primary */

#globalNav .menu--primary + .menu--primary {  border-top: 1px solid #c83c6b; }
#globalNav .menu--primary > a {
	color: #fff;
	background: #e85888;
}
#globalNav .menu--primary.dropdown:not(.dropdown-pc) > a:before { background: #1a1a1a; }

/* dropdown */

#globalNav .dropdownNav { display: none; }
#globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #c83c6b; }
#globalNav .menu--secondary a {
	background: #fff;
	color: #333;
}
#globalNav .menu--secondary.dropdown:not(.dropdown-pc) > a:before { background: #ccc; }
#globalNav ul.clearfix .dropdown > a.menu--opened:before { content: "\f106"; }
#globalNav .dropdownNav .dropdownNav a { background: #f2f2f2; }

/* col */

#globalNav .menu--col6-sp:nth-child(2) { border-top: none; }
#globalNav .menu--col6-sp:nth-child(2n), #globalNav .menu--col6-sp + .menu--col6-sp, #globalNav .menu--col4-sp + .menu--col4-sp, #globalNav .menu--col3-sp + .menu--col3-sp, #globalNav .menu--col8-sp + .menu--col4-sp, #globalNav .menu--col9-sp + .menu--col3-sp { border-left: 1px solid #1a1a1a; }
}

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

.globalNav {
	position:relative;
	background:linear-gradient(#00479d 50%, #003069 50%);
	border-top:#313131 3px solid;
	border-bottom:#00a0e9 3px solid;
	height: 66px;
}

/* menu--primary */

.globalNav .menu--primary { float: left; width: 216px; }
.globalNav .menu--primary > a {
	text-align:center;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:1.8rem;
	font-weight:600;
	color:#FFF;
	width: 216px;
	padding:15px 0;
	}
.globalNav .menu--primary > a:hover, .globalNav .menu--primary.menu--active > a { border-bottom:#00a0e9 7px solid !important; transition: all .1s linear; }

.globalNav ul li:before {
	position: absolute;
	display:block;
	content:"|";
	color:#FFF;
	font-size:3.0rem;
	margin-top:5px;
	margin-left:-7px
	}
.globalNav ul li:first-child:before{
	content:"";
	}

/* dropdown */

.globalNav .dropdown {
	position: relative;
	z-index: 10;
	font-size: 1.4rem;
}
.globalNav .dropdownNav {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	background: #fff;
	width: 220px;
	z-index: 11;
}
.globalNav .menu--primary:last-child .dropdownNav {
	left: auto;
	right: 0;
}
.globalNav .dropdown:hover > .dropdownNav { display: block; }
.globalNav .menu--secondary.dropdown > a:before {
	background: #ccc;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	margin-top: -10px;
}
.globalNav .dropdownNav .dropdownNav {
	top: 0;
	left: 200px;
	z-index: 12;
}

/* menu--secondary */

.globalNav .menu--secondary + .menu--secondary { border-top: 1px solid #ccc; }
.globalNav .menu--secondary a {
	position: relative;
	padding: 10px;
	transition: all .2s linear;
	color: #333;
}
.globalNav .menu--secondary a:hover, .globalNav .menu--secondary.menu--active a { background: #f2f2f2; }
.globalNav .menu--secondary a:before {
	font-family: "FontAwesome";
	content: "\f105";
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -.5em;
	line-height: 1;
}

/*----------------------------------------
globalNav
----------------------------------------*/

/* a */

#globalNav .menu--primary > a { height: 60px; }

}

/*----------------------------------------*----------------------------------------
toggleNav
----------------------------------------*----------------------------------------*/

@media all and (max-width: 767px) {
#header #toggleNav { display:none;}
#toggleNav .toggleNav_contents {}
#toggleNav .toggleNav_block {
	padding: 10px;
	background: #fff;
}
#toggleNav .toggleNav_block + .toggleNav_block { border-top: 1px solid #ccc; }
#toggleNav .menu { text-align: left; }
}

/*----------------------------------------*----------------------------------------
sp_tel
----------------------------------------*----------------------------------------*/

@media screen and (max-width: 767px) {
#sp_tel {
	width: 100%;
	position: fixed;
	bottom:0;
	left: 0;
	text-align:right;
	z-index:9999;
	background:#e85888;
	transform:translate3d(0,0,110px); //ここを追記
}



#sp_tel #globalNav .container{
	display: block !important;
}

#sp_tel .row{
	padding:5px 5px 0 5px;
	margin-bottom:10px !important;
	}
#sp_tel .col--2-sp{
	padding: 0 10px 0 0;
}
}
@media print, screen and (min-width: 768px) {
#sp_tel { display:none !important;}
}


/*----------------------------------------
toggleNav_btn
----------------------------------------*/

@media all and (max-width: 767px) {
#toggleNav{
	
}
.toggleNav_btn {
	position:relative;
	display:block;
	text-align:center;
	
	background: -moz-linear-gradient(top, #FFF,#bfbfbf);
	background: -webkit-linear-gradient(top, #FFF,#bfbfbf);
	background: linear-gradient(to bottom, #FFF,#bfbfbf);
  
	color: #666b64;
	border-radius:5px;
	font-size:.8rem;
	width:100%;
	padding:5px 0;
	margin-top:15%;
}
.toggleNav_btn:before, .toggleNav_btn:after {
	display:block;
	width:80%;
	margin:5px auto 2px auto !important;
	font-family: "FontAwesome";
	font-size:2.0rem;
	line-height: 1;
	
}
.toggleNav_btn--open:before {
	margin-right: 1em;
	content: "\f0c9";
}
.toggleNav_btn--close:after {
	content: "\f00d";
	margin-left: 1em;
}
.toggleNav_btn--opened:before {
	content: "\f00d";
	margin-right: 1em;
}
}

@media screen and (min-width: 768px) {
 .toggleNav_btn { display: none; }
}

/*----------------------------------------
subNav
----------------------------------------*/

@media all and (max-width: 767px) {
#toggleNav .subNav .menu + .menu { border-top: 1px solid #ccc; }
#toggleNav .subNav a {
	display: block;
	text-decoration: none;
	background: #f2f2f2;
	position: relative;
	padding: 10px;
	color: #333;
	font-size: 1.4rem;
}
#toggleNav .subNav a:before {
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -.5em;
	font-family: "FontAwesome";
	line-height: 1;
	content: "\f105";
}
#toggleNav .subNav .menu--active a { text-decoration: underline; }

/* col */

#toggleNav .subNav .menu--col6-sp:nth-child(2) { border-top: none; }
#toggleNav .subNav .menu--col6-sp:nth-child(2n), #toggleNav .subNav .menu--col6-sp + .menu--col6-sp, #toggleNav .subNav .menu--col4-sp + .menu--col4-sp, #toggleNav .subNav .menu--col3-sp + .menu--col3-sp, #toggleNav .subNav .menu--col8-sp + .menu--col4-sp, #toggleNav .subNav .menu--col9-sp + .menu--col3-sp { border-left: 1px solid #ccc; }
}

/*----------------------------------------
info
----------------------------------------*/

@media all and (max-width: 767px) {
#toggleNav .shop + .shop {
	border-top: 1px dotted #ccc;
	margin-top: 10px;
	padding-top: 10px;
}
#toggleNav .shop_tel {
	font-weight: bold;
	line-height: 1;
}
#toggleNav .phone-sp { font-size: 3.5rem; }
#toggleNav .shop_help {
	border-top: 1px dotted #ccc;
	margin-top: 5px;
	padding-top: 5px;
}
}

/*----------------------------------------
social
----------------------------------------*/

@media all and (max-width: 767px) {
#toggleNav .socialArea, #toggleNav .socialArea .container { text-align: center; }
#toggleNav .socialArea { border-bottom: 1px solid #ccc; }
}

/*----------------------------------------*----------------------------------------
menu{
----------------------------------------*----------------------------------------*/

@media print, screen and (min-width: 768px) {
#side_menu{
	padding-left:30px;
}
}

/* side_nav_common */

.side_nav {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 400;
	margin-bottom: 20px;
	border:#e5e5e5 3px solid;
	}
.side_nav dt a{
	font-size:2.0rem;
	font-weight: 500 !important;
	text-align:center;
	color:#0d65b0;
	padding:10px;
	background:#c8edff;
	}
.side_nav dd {
	text-align:left !important;
	padding:0;
	border-bottom:#e5e5e5 3px solid;
	}
.side_nav dd:last-child{
	border-bottom:none;
}
.side_nav a {
	display:block;
	color:#6a6a6a;
	text-decoration:none;
	width:100%;
	padding:10px 10px 10px 15px;
	}
.side_nav a:hover {
	opacity:0.7;
	transition: all .2s linear;
	}
.side_nav dt a:hover{
	opacity:0.7;
}
#side_menu a img:hover {
	opacity:0.7;
	transition: all .2s linear;
	}
@media screen and (max-width: 767px) {
	#side_menu{
		text-align:center;
		margin:30px 0 10px 0 !important;
	}
}
/*----------------------------------------*----------------------------------------
footerNav
----------------------------------------*----------------------------------------*/

@media screen and (max-width: 767px) {
#footerNav {
	background:#0d65b0;
	font-size: 1.3rem;
	text-align: left;
}
#footerNav .container{
	padding:0;
}
#footerNav .menu { border-top: 1px solid #fff; }
#footerNav .menu:first-child { border-top: none; }
#footerNav .menu--col6-sp:nth-child(even) { border-left: 1px solid #fff; }
#footerNav a {
	color: #fff;
	background: #0d65b0;
	text-decoration: none;
	display: block;
	padding: 10px;
	position: relative;
}
#footerNav a:before {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -.5em;
	font-family: "FontAwesome";
	line-height: 1;
	content: "\f138";
}
#footerNav .menu--active a { text-decoration: none; }
#footerNav .row { margin-bottom:0 !important;}
#footerNav .col { margin-bottom:0 !important;}
}
@media print, screen and (min-width: 768px) {
#footerNav {
	text-align:left;
	background:#0d65b0;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 1.5rem;
	padding: 30px 0 15px 0;
}
#footerNav ul { letter-spacing: -.4em; }
#footerNav li {
	letter-spacing: normal;
	margin-bottom:10px;
	padding-right:20px;
}
#footerNav ul ul{
	margin-top:10px;
}
#footerNav li li{
	margin-bottom:10px;
	padding-left:15px;
}
#footerNav a {
	color: #FFF;
	text-decoration: none;
}
#footerNav a:before {
	top: 50%;
	right: 10px;
	margin-top: -.5em;
	margin-right:5px;
	font-family: "FontAwesome";
	line-height: 1;
	content: "\f138";
}
#footerNav li li a:before {
	top: 50%;
	right: 10px;
	margin-top: -.5em;
	margin-right:5px;
	font-family: "FontAwesome";
	line-height: 1;
	content: "\f105";
}
#footerNav a:hover, #footerNav .menu--active a { text-decoration: none; }
}

/*----------------------------------------*----------------------------------------
footer
----------------------------------------*----------------------------------------*/

#footer {
	background: #c8edff;
	color: #c8edff;
}

@media all and (max-width: 767px) {
#footer { padding: 20px 0 1px; }
#footer .container { text-align: center; }
}

@media screen and (min-width: 768px) {
#footer { margin-top:60px; padding: 20px 0;}
}

/*----------------------------------------*
footer_info
----------------------------------------*/

#footer .logo a {
	background: url(../img/footer_logo.gif) no-repeat left center;
	background-size: contain;
	width: 304px;
	height: 52px;
}

@media screen and (max-width: 767px) {
#footer .logo { margin-bottom: 10px; }
#footer address {
	border-bottom: 1px solid rgba(255,255,255,.2);
	padding-bottom: 20px;
}
#footer .logo a {
	margin-left: auto;
	margin-right: auto;
	width: auto !important;
}
}


#footer_caption{
	background: #0d65b0;
	color:#FFF;
	border-top:#FFF 1px solid;
	padding-top:20px;
}
@media screen and (max-width: 767px) {
#footer_caption{
	padding:20px;
}
}

/*----------------------------------------*
contact
----------------------------------------*/

#footer .tel {
	line-height: 1;
	margin-bottom: 5px;
	font-weight: 600;
}
#footer .help {
	margin-bottom: 10px;
	font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
#footer .tel_head { font-size: 1.7rem; }
#footer .tel_number { font-size: 3.4rem; }
#footer .mail_btn { text-align: left; }
}

/*----------------------------------------*----------------------------------------
copyright
----------------------------------------*----------------------------------------*/

#copyright {
	text-align:right;
	color:#FFF;
	background:#0d65b0;
	font-size: 1.3rem;
	padding: 15px 0;
}
@media screen and (max-width: 767px) {
#copyright {
	text-align:center;
	border-top:#fff 1px solid;
	padding-bottom:120px !important;
	}
}


/*----------------------------------------*----------------------------------------
sp_bnr
----------------------------------------*----------------------------------------*/

#sp_bnr {
	text-align:center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index:19999 !important;
	width:100%;
	max-height:320px;
	background: rgba(0,0,0, .6);
	padding:0 10px 0 10px;
}
#sp_bnr img{
	margin:auto;
}
#sp_bnr .coupon{
	background: none!important;
}
#sp_bnr #coupon0{
	background:#FFF !important;
}
@media print, screen and (min-width: 768px) {
#sp_bnr {display:none !important;}
}


/*----------------------------------------*----------------------------------------
pageTop
----------------------------------------*----------------------------------------*/

#pageTop {
	position: fixed;
	text-decoration: none;
	color: #fff;
	background: rgba(0,160,233, .8);
	text-align: center;
	display: block;
}

@media screen and (max-width: 767px) {
/* #pageTopを使う場合 */
#pageTop {
	position:relative !important;
	display:block;
	font-size:1.2rem;
	width:30%;
	height:20px;
	margin:-20px 0 0 auto;
	background:#e85888;
	border-radius: 5px 5px 0 0;
	padding:3px;
	}
}

@media print, screen and (min-width: 768px) {
#pageTop {
	bottom: 20px;
	right: 20px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	line-height: 70px;
	font-size: 2.4rem;
}
}

/*----------------------------------------*----------------------------------------
pageHeader
----------------------------------------*----------------------------------------*/

#pageHeader { background: #79cdf3; }
#pageHeader h1, #pageHeader div {color: #fff; margin-bottom: 0; }

@media screen and (max-width: 767px) {
#pageHeader { padding: 10px 0; margin-bottom:30px; }
#pageHeader h1 { }
#pageHeader + #contents { margin-top: 20px; }
}

@media print, screen and (min-width: 768px) {
#pageHeader { padding: 20px 0; }
#pageHeader h1,#pageHeader  div{
	font-size: 3rem;
	line-height: 1;
	font-weight: normal;
	font-family: "Noto Sans Japanese";
}
#pageHeader + #shortcut { margin-top: 20px; }
#pageHeader + #contents { margin-top: 60px; }
}

/*----------------------------------------*----------------------------------------
shortcut
----------------------------------------*----------------------------------------*/

#shortcut { font-size: 1.3rem; }
#shortcut a {
	color: #333;
	text-decoration: none;
	transition: all .2s linear;
	position: relative;
}
#shortcut a:before {
	font-family: "FontAwesome";
	content: "\f107";
}

@media all and (max-width: 767px) {
#shortcut {
	text-align: left;
	margin-bottom: 20px;
}
#shortcut li + li { border-top: 1px solid #ccc; }
#shortcut a {
	display: block;
	padding: 10px 15px;
	background: #f2f2f2;
}
#shortcut a:before {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -.5em;
	line-height: 1;
}
#shortcut + #contents { margin-top: 20px; }
}

@media screen and (min-width: 768px) {
#shortcut { margin-bottom: 40px; }
#shortcut ul { letter-spacing: -.4em; }
#shortcut li {
	display: inline;
	position: relative;
	letter-spacing: normal;
}
#shortcut li + li { margin-left: 20px; }
#shortcut a:before { margin-right: 10px; }
#shortcut a:hover { color: #f00; }
#shortcut + #contents { margin-top: 60px; }
}

/*----------------------------------------*----------------------------------------
breadcrumb
----------------------------------------*----------------------------------------*/

@media all and (max-width: 767px) {
#breadcrumb { display: none; }
}

@media screen and (min-width: 768px) {
#breadcrumb {
	text-align:left;
	letter-spacing: -.4em;
	font-size: 1.2rem;
	margin:10px 0 40px;
}
#breadcrumb li {
	letter-spacing: normal;
	display: inline;
}
#breadcrumb li:before {
	font-family: "FontAwesome";
	content: "\f105";
	margin: 0 10px;
}
#breadcrumb li:first-child:before {
	content: "";
	margin: 0;
}
#breadcrumb a {
	color: #333;
	text-decoration: none;
}
#breadcrumb a:hover, #breadcrumb a:active { text-decoration: underline; }
}


/*----------------------------------------*----------------------------------------
tel_area
----------------------------------------*----------------------------------------*/

#tel_area a img:hover{
	opacity:0.6;
	transition:.2s linear;
}

@media screen and (min-width: 768px) {
#tel_area{
	display: inline-block;
	background:url(../img/tel_bg.webp) top left no-repeat;
	width:820px;
	height:322px;
	padding:160px 15px 15px 25px;
}
#tel_area .tel{
	margin-bottom:7px !important;
}
}
@media all and (max-width: 767px) {
#tel_area{
	background:#FFF;
	padding:5px !important;
	margin:30px 0 -25px 0 !important;
}
#tel_area .tel{
	margin-top:0 !important;
	margin-bottom:7px !important;
}
}


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

	#footerNav a[target="_blank"]:after {
	    content: "";
	    width: 1em;
	    height: 1em;
	    background: url(../../img/icon_outlink.png) no-repeat center center /contain;
	    display: inline-block;
	    margin-left: 5px;
	    transform: translateY(1px);
	}
}
@media print, screen and (max-width: 767px) {

#footerNav a[target="_blank"]:before {
	content: "";
    width: 1em;
    height: 1em;
    background: url(../../img/icon_outlink.png) no-repeat center center /contain;

}

}