@charset "UTF-8";
/*
 * cmn_layout.css
 *
 *  version --- 3.5
 *  updated --- 2012/12/7
 */


/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */

html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ }
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	line-height: 1.5;
	color: #3c3b56;
}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; }
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; }
fieldset, img
{ border: 0;}
img
{ vertical-align: top;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ /* outline: none; */ }
abbr, acronym
{ border: 0;}

/* !Reset Module
---------------------------------------------------------- */
.reset div, .reset dl, .reset dt, .reset dd, .reset ul, .reset ol, .reset li, .reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6,
.reset pre, .reset form, .reset fieldset, .reset p, .reset blockquote, .reset th, .reset td
{ margin: 0; padding: 0;}
.reset input, .reset textarea
{ margin: 0; }
.reset table
{ border-collapse: collapse; border-spacing: 0; }
.reset fieldset, .reset img, .reset abbr, .reset acronym
{ border: 0;}
.reset address, .reset caption, .reset cite, .reset code, .reset dfn, .reset em, .reset th, .reset var
{ font-style: normal; font-weight: normal;}
.reset ol, .reset ul
{ list-style: none;}
.reset caption, .reset th
{ text-align: left;}
.reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6
{ font-weight: normal;}
.reset a, .reset input
{ /* outline: none; */ }
.reset q:after, .reset q:before
{ content:'';}

/* !Clearfix
---------------------------------------------------------- */
.clearfix,
#contents,
section,
article
{
	display: block;
	min-height: 1%;
}
.clearfix:after,
#contents:after,
section:after,
article:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix,
* html #contents,
* html section,
* html article
{
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ==========================================================
 
     !SP

========================================================== */

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.sp { display: block !important; }
.pc { display: none !important; }

/* !Layout
---------------------------------------------------------- */

html { overflow-y: scroll;}
body { font-size: 1.6rem; text-align: left; position: relative; }
@media print {
	html,
	html body { *zoom: 0.65;}
}

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

header {
    position: fixed;
	height: 70px;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 9999;
	background: #fff;
	box-shadow: 0px 6px 2px -2px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 6px 2px -2px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 6px 2px -2px rgba(0,0,0,0.1);
	z-index: 9999;
}

.hd_inner {
    height: 100%;
}

header h1 {
    float: left;
	width: 35%;
    max-width: 130px;
	margin: 12px 0 0 12px;
}

header div.connect {
    float: right;
    width: 180px;
    height: 100%;
    text-align: center;
}

header div.tel {
    height: 55%;
}

header p.tel_number {
    color: #da143c;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2;
    padding: 6px 0 0;
}

header p.tel_number a {
    text-decoration: none;
}

header p.tel_txt { font-size: 1rem; }

header a.mail {
    height: 45%;
    background: #da143c;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}

header a.mail:hover {
	background: #c90534;
}

header h1 a:link,
header h1 a:visited {
    color: #3c3b56;
    text-decoration: underline;
}

/* !gnav
---------------------------------------------------------- */

#gnav {
    height: 50px;
    background: #da143c;
    position: relative;
}

#gnav a.spnav {
    display: block;
    height: 50px;
}

#gnav .spmenu_btn {
    display:block;
    position:absolute;
    top:14px;
    left:15px;
    width:30px;
    height:22px;
    background:#fff;
    border-top:10px solid #da143c;
    border-bottom:10px solid #da143c;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
#gnav .spmenu_btn:before {
    content:'';
    position:absolute;
    width:30px;
    height:2px;
    background:#fff;
    top:-9px;
    right:0;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
#gnav .spmenu_btn:after {
    content:'';
    position:absolute;
    width:30px;
    height:2px;
    background:#fff;
    bottom:-9px;
    right:0;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
#gnav a.spnav.active .spmenu_btn {
    background:#da143c;
}
#gnav a.spnav.active .spmenu_btn:before {
    -moz-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    top:0;
    right:0;
}
#gnav a.spnav.active .spmenu_btn:after {
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    bottom:0;
    right:0;
}

#gnav .spmenu_txt {
    display:block;
    position:absolute;
    top:13px;
    left:60px;
    font-size: 1.8rem;
    color: #fff;
}

#gnav a.spnav:after {
    position:absolute;
    font-family: "Font Awesome 5 Free";
	content: "\f107";
    font-weight: 900;
    color: #fff;
    top: 3px;
    right: 15px;
    font-size: 3rem;
}

#gnav a.spnav.active:after {
    position:absolute;
    font-family: "Font Awesome 5 Free";
	content: "\f106";
    font-weight: 900;
    color: #fff;
    top: 3px;
    right: 15px;
    font-size: 3rem;
}

#gnav .menu {
    display:none;
    position:absolute;
    top:50px;
    left:0;
    width:100%;
	border-top:1px solid #fff;
    z-index: 9998;
}
#gnav nav {
    display:block;
    width:100%;
    margin:0 auto;
	background: #da143c;
}
#gnav nav li a {
    display:block;
    width:100%;
    color:#fff;
    padding:15px 15px 15px 35px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
    border-bottom:1px solid #ff97b0;
    text-decoration: none;
    background: url(../images/common/icn_white.png) no-repeat 18px center / 0.4em auto;
}

#gnav nav li.home a {
    background: none;
    padding:15px ;
}
#gnav nav li.home a span.sp_only { display: inline-block; }
#gnav nav li.home img { width: 1em; margin: 0.2em 0.5em 0 0; }

#gnav .active a,
#gnav a:hover { text-decoration: underline; }

/* !wrapper
---------------------------------------------------------- */

#wrapper {
	margin: 0 auto;
	width: 100%;
	text-align: left;
	position: relative;
    display: flex;
}

main { margin: 20px 5% 50px; }
aside { margin: 20px 5%; }

/* !pagetop
---------------------------------------------------------- */

.pagetop {
  display: none; /*非表示にしておく*/
}

.pagetop a:link {
    display: inline-block;
    margin: 20px;
    line-height: 1;
    font-size: 4rem;
    color: #3c3b56;
}

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

footer {
	background: #f0f0f0;
	padding: 50px 0 0;
}

footer p.logo { padding: 20px 25% 0; }
footer dl.address {
	padding: 50px 10%;
    margin: 0 0 50px;
    border-bottom: 1px solid #b6b6c2;
}

footer dl.address dt, footer dl.address dd { font-size: 1.4rem; }

footer dl.address dt {
    border-bottom: 1px solid #b6b6c2;
    padding: 0 0 5px;
    margin: 0 0 15px;
}

footer dl.address dt:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0c8';
    padding-right: 7px;
}

footer dl.address dd:not(:last-child) {
    margin: 0 0 20px;
}

footer nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0 5%;
}

footer ul { width: 50%; }

footer li.head {
    padding:15px;
}

footer li a {
    display:block;
    width:100%;
    color:#fff;
    padding:15px 15px 15px 35px;
    position:relative;
    background: url(../images/common/icn_gray.png) no-repeat 18px center / 0.4em auto;
}

footer a:link,
footer a:visited {
    color: #3c3b56;
    text-decoration: none;
}

footer a:hover,
footer a:active { text-decoration: underline; }

footer ul.utility {
    width: 90%;
    margin: 30px auto 50px;
    padding-top: 30px;
    border-top: 1px dotted #b6b6c2;
}

footer ul.utility li a {
    font-size: 1.4rem;
    padding: 10px 10px 10px 35px;
}


footer div.copyright {
	padding: 20px 10%;
    font-size: 1.4rem;
    text-align: center;
    background: #da143c;
    color: #fff;
}

/* !h(n)eading
---------------------------------------------------------- */

main h1 {
    margin: 0 0 30px;
    border-top: solid 3px #dbdbdb;
    border-bottom: dotted 1px #dbdbdb;
    position: relative;
    padding: 15px;
    color: #da143c;
}

main h1:before {
    position: absolute;
    content: " ";
    display: block;
    border-top: solid 3px #da143c;
    top: -3px;
    left: 0;
    width: 30%;
}

main h2 {
    font-size: 1.8rem;
    padding: 0 10px 10px;
    margin: 0 0 20px;
    border-bottom: 1px dotted #da143c;
    font-weight: bold;
}

main h3 {
    font-size: 1.6rem;
    margin: 0 0 15px;
    color: #da143c;
}


/* ==========================================================
 
     !PC

========================================================== */

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

.sp { display: none !important; }
.pc { display: block !important; }
    
a[href^="tel:"] { pointer-events: none; }

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

header div.tel {
    height: 80px;
}
    
header p.tel_number {
    color: #da143c;
    font-size: 2.3rem;
    font-weight: bold;
    line-height: 1.2;
    padding: 0;
}

header p.tel_number a {
	color: #da143c;
    text-decoration: none;
}

header a.mail {
    height: 35px;
    background: #da143c;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}  
    
/* !wrapper
---------------------------------------------------------- */

div#wrapper {
	padding: 50px 0 80px;
}

/* !footer
---------------------------------------------------------- */
    
footer .ft_inner {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto 50px;
    }

footer p.logo {
    float: left;
    width: 20%;
    padding: 0;
}
    
footer dl.address {
    float: left;
    width: 40%;
	padding: 0 5%;
    margin: 0;
    border-bottom: none;
}

footer dl.address dt, footer dl.address dd { font-size: 1.2rem; }

footer dl.address dt {
    border-bottom: 1px solid #b6b6c2;
    padding: 0 0 5px;
    margin: 0 0 15px;
}
    
footer nav {
    float: right;
    width: 30%;
    min-width: 15em;
    margin: 0;
}
    
    footer ul { padding: 0 0 0 5%; }

footer nav li.head {
    padding: 10px 0 10px 15px;
}

footer nav li a {
    padding:10px 0 10px 35px;
}

footer ul.utility {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
}

footer ul.utility li a {
    padding: 15px 15px 15px 35px;
}
	
}

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

.sp_nav { display: none !important; }
    
#gnav .menu {
    display: block;
    position: static;
    width:100%;
	border-top: none;
    z-index: 9998;
}
#gnav nav {
    display: flex;
    margin:0 auto;
	background: #da143c;
}

#gnav nav ul {
    display: flex;
    width:100%;
}
    
#gnav nav ul li {
    flex: auto;
    border-right: 1px solid #fff; 
}
    
#gnav nav li a {
    display:block;
    width:100%;
    color:#fff;
    padding:15px 9% 15px 25%;
    border-bottom: none;
    text-decoration: none;
    background: url(../images/common/icn_white.png) no-repeat 12% center / 0.4em auto;
}

#gnav nav li.home {
    width: calc(1em + 30px)
}
    
#gnav nav li.home a {
    background: none;
    padding:15px;
    text-align: center;
}
#gnav nav li.home a span.sp_only { display: none; }
#gnav nav li.home img { width: 1.6rem; margin: 0.2em 0 0; }
    
#gnav .active a,
#gnav a:hover { text-decoration: underline; }

}

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

#gnav nav li a {
    display:block;
    width:100%;
    color:#fff;
    padding:15px 13% 15px 32%;
    border-bottom: none;
    text-decoration: none;
    background: url(../images/common/icn_white.png) no-repeat 20% center / 0.4em auto;
}
    
}
