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

/* ===================================================================
 Reset
=================================================================== */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
 margin: 0; padding: 0; border: 0; font-weight: normal; font-size: 100%; vertical-align:baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, header, footer, aside, figure, figcaption, nav, section { display:block; }
figure {padding: 0; margin: 0 0 1em 0;}
html { scroll-behavior:smooth; }
body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
table { border-collapse: collapse; border-spacing: 0;}

/* Layout
=================================================================== */
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
*, :before, :after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit;}

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium");}
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold;}

body { width:100%; background:#fff; padding:0; margin:0 auto; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; color: #1F1F1F; font-size:16px; line-height:1.5; letter-spacing: 0.08em;}
#wrap { overflow: hidden;}

/* Chrome でのみフォントを太めに表示する */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  * { text-shadow: transparent 0 0 0, rgba(0, 0, 0, .7) 0 0 0 !important;}
}

@media only screen and (min-width: 960px) { 
    .tel { pointer-events:none}
}

p { margin:0 0 1em; padding:0; }
img { max-width:100%; height: auto; margin:0; padding:0; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle;}

ul,ol { list-style-type:none;}

.alignleft { display:inline; float:left; margin-right:1.5em;}
.alignright { display:inline; float:right; margin-left:1.5em;}
.aligncenter { clear:both; display:block; margin-left:auto; margin-right:auto; text-align: center;}

.clear { clear: both;}
.clear:after { content:" "; display:block; clear:both;}

a.btn { width: 320px; max-width:100%; margin: 0 auto; padding: 20px 0 19px 0; font-size: 18px; font-weight: bold; background: #000; color: #FFF; text-align: center; line-height: 1; display: block; text-decoration: none;}
a.btn { vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
a.btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #222;
  -webkit-transform: scaleX(0); transform: scaleX(0);
  -webkit-transform-origin: 0 50%; transform-origin: 0 50%;
  -webkit-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
a.btn:after { font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900; padding-left: 1em; color: #BBB;}
a.btn:hover, a.btn:focus, a.btn:active { color: #fff; opacity:1; filter: alpha(opacity=100);}
a.btn:hover:before, a.btn:focus:before, a.btn:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

a,
a:visited { text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s;}
a:focus { }
a:hover,
a:active { opacity:0.7; filter: alpha(opacity=70);}

.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between;}
.LtoR { -webkit-flex-direction: row; flex-direction: row;}
.RtoL { -webkit-flex-direction: row-reverse; flex-direction: row-reverse;}

/* ===================================================================
 Header
=================================================================== */
#site-head { position:relative; width: 100%; padding: 15px 80px; background:#FFF; text-align: center; height: 100px;}
#site-head #head-area { margin: 0;}
#site-head #head-area .logo { width:310px; float:left; padding:10px 0 0 0; z-index:1200;}
#site-head #head-area .logo img { width:100%;}
#site-head #head-area #head { float: right; width: calc(100% - 350px); margin: 0;}

@media only screen and (min-width:1921px) {
    #site-head { max-width:1920px; margin-left:auto; margin-right:auto; }
}
@media screen and (max-width:1400px){
    #site-head { padding: 15px 10px;}
    #site-head #head-area #head { width: calc(100% - 320px); }
}

@media screen and (max-width:959px){
    #site-head { height:60px; padding:10px 20px;}
    #site-head #head-area .logo { width:180px; padding:0;}
}

/*--------------------------------------------------------------
 Navigation
--------------------------------------------------------------*/
#head-nav ul li { font-size: 16px; }
#head-nav ul li a { position: relative; display: inline-block; text-decoration: none; padding: 5px 10px;}
#head-nav ul li a::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 2px; background: #F3130F; transform: scale(0, 1); transform-origin: center top; transition: transform .3s;}
#head-nav ul li a:hover::after { transform: scale(1, 1);}

@media screen and (min-width:960px), print {
    #head-nav { width: 100%; max-width: 620px; margin:20px 0; padding:0;}
    #head-nav:after { content:" "; display:block; clear:both;}
    #head-nav ul { position: relative; width: 100%; height: 50px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between;}
    #head-nav ul li { position: relative; margin: 0;}
    #head-nav ul li a { display: block; color: #222;}
    #head-nav ul li a:hover { color: #777; -webkit-transition: all .5s; transition: all .5s;}
}

@media screen and (max-width:959px){
    #head-nav { width: 100%; margin:0 auto; padding:0;}
    #head-nav ul { width: 100%; margin:0 auto; list-style-type:none;}
    #head-nav ul li {}
    #head-nav ul li a{ display:block; margin:0 auto; padding:15px 2px; border-bottom: 1px solid #CCC; color: #fff; text-decoration: none; text-align: center;}
    #head-nav ul li a:hover { color: #fff; opacity:1; filter: alpha(opacity=100); background-color:rgba(42,42,42,1.00);}
}

#head .head-bt { position: absolute; width: 100px; right:5%; top:15px; margin:0 auto; padding:0;}
#head .head-bt a { float: left; height: 70px; text-align: center; line-height: 1.2; display: block;}
#head .head-bt a:hover{ opacity:0.8; filter: alpha(opacity=80);}
#head .head-bt .nav-mail a{ width: 100px; padding:15px 0 0 0; font-size: 13px; color: #000; letter-spacing: 0.05em;}
#head .head-bt .nav-mail a i { padding-bottom: 3px; font-size: 22px;}

@media screen and (max-width:1400px){
    #head .head-bt { width: 100px; right: 10px;}
}

@media screen and (max-width:959px){
    #head .head-bt { width: 50px; right: 50px; top:10px;}
    #head .head-bt a { height: 40px;}
    #head .head-bt .nav-mail br,
    #head .head-bt .nav-mail a{ margin:0 0 0 2px; height: 40px; width: 40px; padding:5px 0 0 0; border-radius: 50%;}
    #head .head-bt .nav-mail span{display: none;}
    #head .head-bt .nav-mail a i { font-size: 30px;}
}

/*--------------------------------
 Header SP
----------------------------------*/
@media screen and (min-width:960px){
    #site-head .hidden_box input,
    #site-head .hidden_box label { display: none;}
}

@media screen and (max-width:959px){
    #site-head .hidden_box { width: 100%; position: fixed; top:40px; right: 0; margin: 0; padding: 0; z-index: 10000;}
    #site-head .hidden_box label { width:40px; height: 40px; position: absolute; top:-30px; right: 10px; font-weight: bold; cursor :pointer; transition: .8s; background: url("../images/menu_open.png") no-repeat 0 0; background-size: 40px 40px;}
    #site-head .hidden_box label span { width: 40px; height: 40px;}
    #site-head .hidden_box label:before {}
    #site-head .hidden_box label:hover { background: url("../images/menu_hover.png") no-repeat 0 0; background-size: 40px 40px;}
    #site-head .hidden_box input:checked ~ label { background: url("../images/menu_close.png") no-repeat 0 0; background-size: 40px 40px;}
    #site-head .hidden_box input { display: none;}
    #site-head .hidden_box .hidden_show { width: 100%; height: 0; padding:0; background-color:rgba(0,0,0,0.9); overflow: hidden; opacity: 0; transition: 0.8s; margin-top: 20px;}
    #site-head .hidden_box input:checked ~ .hidden_show { padding: 0; height: auto; opacity: 1;}
}

/* ===================================================================
 main
=================================================================== */
#main { clear: both; width:100%; margin:0; padding:0;}

/* Dl List
--------------------------------------------------------------*/
dl.list-dl { clear:both; width:100%; text-align:left; border-bottom:1px solid #777; }
dl.list-dl dt { padding:18px 0 10px 10px; clear:left; float:left; width:10em; border-top:1px solid #777; color:#555;}
dl.list-dl dd { padding:18px 0 10px 10px; margin-left:10em; border-top:1px solid #777;}
dl.list-dl:after,dl.list-dl dt:after,dl.list-dl dd:after { content:" "; display:block; clear:both;}

@media only screen and (max-width: 640px) {
	dl.list-dl dt { clear: both; float: none; width: 100%; padding-bottom: 5px;}
	dl.list-dl dd { margin-left:0; border-top:none;}
}

/* ===================================================================
 FOOTER
=================================================================== */
#site-foot { clear: both; text-align: center; background: #fff; border-top:10px solid #000;} 
#site-foot:after { content:" "; display:block; clear:both;}
.foot { width: 94%; max-width: 1400px; margin: 0 auto; padding: 50px 0 30px 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between;}
.foot-logo { width: 310px;}
.foot-add { width: 360px; text-align: left;}
.foot-add img { max-width: 100%; }
.foot-add a.tel { font-weight: bold; color: #000; text-decoration: none;}
.foot-nav { width: 560px; float: right; padding: 20px 0 0 0; text-align: left; line-height: 1.6;}
.foot-nav ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between;}
.foot-nav ul li{  }
.foot-nav ul li a { font-size:16px; color: #000; }

@media only screen and (max-width: 1400px) { 
    .foot-logo { width: 20%;}
    .foot-add { width: 25%; }
    .foot-nav { width: 50%;}
}

@media only screen and (max-width: 960px) { 
    .foot-logo { width: 100%; float: none; text-align: center;}
	.foot-add { width: 100%; float: none; text-align: center;}
    .foot-nav { width: 100%; max-width: 500px; float: none; margin: 0 auto 20px auto;}
}

@media only screen and (max-width: 480px) { 
    .foot-nav { padding: 20px 0 20px 20px; max-width: 375px;}
    .foot-nav ul { justify-content: flex-start;}
    .foot-nav ul li{ width:33%;}
    .foot-nav ul li a { font-size:15px;}
}

/* copyright */
.copyright { clear: both; width:100%; text-align:center; font-size:12px; padding: 7px 0; color: #FFF; background: #000;}
.copyright a { color:#FFF; text-decoration:none;}
.copyright a:hover { color:#FFF; text-decoration:underline;}

/* ページ先頭へ -----------------*/
#pagetop { position:fixed; bottom:6px; right:6px; z-index: 999999;}
#pagetop a { background-color:rgba(0,0,0,1); border-radius:3px; width:50px; height:50px; line-height:50px; text-align:center; display:block; font-size:25px; color:#fff; text-decoration:none;}
#pagetop a:hover { text-decoration:none; color:#fff; }