@charset "utf-8";

/*----------------------------------------------------------------

layout Set

----------------------------------------------------------------*/

/* Header
----------------------------------------------- */
header {
width: 100%;
padding: 0 0 0;
z-index: 100;
background: url(../images/header_bg2.png) repeat-x center top;
position: relative;
font-size: 0.6em;
line-height: 1.5;
border-bottom: 4px solid #e5e5e5;
}
hgroup {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
header h1{
padding: 3px 2%;
text-align: center;
color: #fff;
background: url(../images/header_bg2.png) repeat center top;
}
header p{
margin-bottom: 0.8em;
}

/* ロゴ */
header .logo {
font-size: 1em; 
margin: 10px 0 ;
padding: 0 0 0 10px;
max-width: 62%;
height: 50px;
}
header .logo a {color: #333;}

header .address{ text-align: center;}

/* ナビゲーション */
#global-nav {
position: absolute;
margin: 0;
height: auto;
overflow: hidden;
z-index: 1000;
top: 0;
right: 0;
}
#menu {
display: none;
}

/* 768px～ Header用メディアクエリ開始 */
@media screen and (min-width : 768px) {
header {
font-size: 0.75em;
}
header .itemleft{
float: left;
max-width: 35%;
margin-left: 1%;
}
/* ロゴ */
header .logo {
font-size: 1em; 
margin: 18px 0 ;
padding: 0 0 0 ;
max-width: 94%;
height: auto;
}
header .address{
clear: both;
float: left;
text-align: left;
margin: 0 0 1em 1%;
}
header .info{
display: inline-block;
margin: 0 0 1em 1em ;
}

/* ヘッダーレスポンス */
#headerResponse{
float: right;
width: 64%;
position: relative;
margin: 18px 0 10px;
}
#headerResponse ul {
margin: 0 0 0;
padding: 0;
text-align: right;
}
#headerResponse ul li{
margin: 0;
display: inline-block;
vertical-align: top;
}
#headerResponse ul li.tel{
margin: 0 1% 0 0;
max-width: 59%;
}
#headerResponse ul li.cal{
margin: 0 1% 0 0;
max-width: 38%;
}
#headerResponse p{
margin: 10px 2% 0 0;
text-align: right;
}

/* ナビゲーション */
#global-nav {
clear: both;
position: relative;
font-size: 1.3em;
}
#menu {
display: block;
height: auto;
width: 1000px;
margin: 0 auto 0;
padding: 0;
border-top: 1px dashed #e5e5e5;
overflow: hidden;
background: url(../images/common/nav_dots.png) no-repeat left center;
}
/* 728px以下スクロール用 */
@media screen and (max-width : 768px) {
#global-nav {
box-sizing: border-box;
border-right: 3px solid #666;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
#menu { border-right: none;margin-bottom: 0;}
}
/* End 728px以下スクロール用 */

#menu li {
list-style: none none;
float: left;
height: 38px;
padding: 21px 25px 3px 25px;
margin: 0;
font-weight: bold;
background: url(../images/common/nav_dots.png) no-repeat right center;
}
#menu li a {
border-top: none;
border-right: none;
background: none;
padding: 0 0 3px;
color: #461b0c;
position: relative;
text-decoration: none;
display: inline-block;
margin: auto;
font-size: 0.75em;
}
#menu li a:before {
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
top: 25%;
bottom: 15%;
left: 0;
right: 0;
border-bottom: 2px solid;
}
#menu li a:hover,
#menu li.current a {
color: #6e655f;
}
#menu li a:hover:before,
#menu li .current a:before {
opacity: 1;
top: 0;
bottom: 0;
}
.slicknav_menu {
display: none;
}
}
/* 1024px～ Header用メディアクエリ開始 */
@media screen and (min-width : 1024px) {
/* ヘッダー */
header {
}
hgroup {
width: 1000px;
margin: 0 auto;
}
header h1{
padding: 2px 0 3px;
text-align: left;
background: none;
width: 1000px;
margin: 0 auto;
}
header p{
margin-bottom: 0.8em;
}

header .itemleft{
float: left;
max-width: 100%;
margin-left: 0;
}
/* ロゴ */
header .logo {
max-width: 100%;
height: auto;
margin: 18px 0 10px;
}
header .address{
margin: 0 0 1em 5px;
}
header .info{
float: right;
margin: 0 0 1em 0;
}

/* ヘッダーレスポンス */
#headerResponse{
width: auto;
margin: 18px 0 10px;
}
#headerResponse ul {
}
#headerResponse ul li{
}
#headerResponse ul li.tel{
margin: 0 10px 0 0;
max-width: 100%;
}
#headerResponse ul li.cal{
margin: 0 0 0 0;
max-width: 100%;
}
}
/* END Header
----------------------------------------------- */


/* ヘッダー（見出し・画像）枠 */
#headline {
width: 100%;
padding: 0 0 20px;
margin: 0 auto 0;
text-align : center;
position: relative;
background: url(../images/main_bg.jpg) no-repeat center top;
background-size: cover;
}
#headline #headcopy {
margin: 0;
padding: 0;
}
#headline #headcopy p{
margin-bottom: 0.5em;
}
#headline #headcopy p.subpage{
padding: 1em 2% 0;
}
#headline #headcopy p.bottom{
margin: 0 0 0;
padding: 1em 1em;
background: #535353;
}
#headline #headcopy .arrow,#read .arrow{
width: 40px;
}

#read {
width: 94%;
margin: 1em auto 0;
text-align: left;
}
#read ul {
margin: 2em auto;
}

/* コンテンツ枠 */
#contents {
width : 100%;
margin : 0 auto;
text-align : center;
}

#privacy{padding-top: 100px}

/* メインコンテンツ */
#main {
width : 100%;
}

#main #postscript {margin-top: 40px;margin-bottom: 40px;}

section{
width : 92%;
margin : 0 auto;
}

/* コンテンツ内スタイル */
#contents .readcopy {
font-size: 22px;
padding-bottom: 20px;
}


/* fixedコンタクト
----------------------------------*/
#fixed_contact {
position: fixed;
bottom: 0;
width: 100%;
height: 64px;
text-align: center;
padding:5px 0 3px;
background: rgba(248,246,243,0.9);
z-index: 1000;
}
#fixed_contact p {
font-size: 11px;
}
#fixed_contact .tel{
font-size:1.5em;
color:#ff9f00;
line-height:1.2;
}
#fixed_contact .tel span{
padding:0;
font-size:1.5em;
}
#fixed_contact .tel a{ color:#ff9f00;}

#fixed_contact .telimg{
float: left;
width: 72%;
text-align: center;
padding: 0 1%;
height: 62px;
}
#fixed_contact .btn{
float: right;
width: 26%;
text-align: left;
height: 62px;
}

/* PageTOP */
#pagetop {
position: fixed;
bottom: 70px;
right: 10px;
text-align: right;
padding:5px 0;
z-index: 1000;
}
#pagetop a img {
vertical-align: bottom;
width: 50px;
}

/* フッター */
footer {
text-align : center;
padding : 12px 2% 120px;
margin: 40px 0 0;
}
footer p {
margin: 1em 0;
color : #444;
text-align : center;
}
footer p a {color: #444;}
footer p a:hover { color: #444; text-decoration: none;}

footer .copy {
margin: 12px 0 0;
}

/* fixed_line_pc
----------------------------------------------- */
#fixed_line_pc{
display: none;
}


/* response
----------------------------------------------- */
.response{
text-align: center;
margin: 30px 0;
}
.response p{
text-align: center;
}
.response .contact-btn{
width: 100%;
text-align: center;
margin:15px auto 0;
border-radius:10px;
font-weight: bold;
}
.contact-btn a{
width: 90%;
margin:0 auto;
padding:5% 1%;
display: block;
text-decoration: none;
color:#fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.contact-btn a:hover{
color:#fff;
}
.contact-btn:hover{
opacity: 0.8;
}

.response .contact-btn.tel{
background: #C7B299;
border-bottom: 6px solid #998970;
}
.contact-btn.tel span{
display: inline-block;
}
.contact-btn.tel .telnum{
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 2em;
color: #fff;
background: url(../images/common/icon_tel02.png) no-repeat left center;
background-size: 36px;
padding: 0 0 0 40px;
text-decoration: none;
}
.contact-btn.tel .sm{
font-size: 0.9em;
line-height: 1.5;
}
.contact-btn.line{
background: #00b900;
border-bottom: 6px solid #009d00;
}

/* 768px～ メディアクエリ開始 */
@media screen and (min-width : 768px) {
#headline {
background: url(../images/main_bg.jpg) repeat-x center top;
}
  
#headline #headcopy .arrow,#read .arrow{
width: 60px;
}


/* fixed_line_pc
----------------------------------------------- */
#fixed_line_pc{
z-index: 100;
display: block;
position: fixed;
bottom: 110px;
right: 0px;
width: 70px;
opacity: 0.9;
}

/* PageTOP */
#pagetop {
bottom: 10px;
right: 10px;
}
#pagetop a img {
vertical-align: bottom;
width: 70px;
}

footer {
margin: 80px 0 0;
padding: 0 0 40px;
}
.footertel {display: none;}

}

/* 1024px～ メディアクエリ開始 */
@media screen and (min-width : 1024px) {

/* ヘッダー（見出し・画像）枠 */
#headline {
background-size: auto;
margin: 0 auto 50px;
background: url(../images/main_bg.jpg) repeat-x center top;
}
#headline #headcopy {
margin: 0;
padding: 0;
}
#headline #headcopy p {
text-align : center;
position: relative;
margin-bottom: 1em;
}
#headline #headcopy p.subpage{
padding: 1.5em 0 0 ;
}

#read {
width: 1000px;
margin: 40px auto 80px;
text-align: center;
}
#read .bnr {
margin: 70px auto 70px;
}


.inner{
width: 780px;
margin: 0 auto;
}

/* メインコンテンツ */
#contents {
width: 100%;
}
#main {
margin: 0 auto;
}
section{
width: 780px;
margin: 0 auto 20px;
background: #fff;
font-size : 1em;
}
section p{
}


/* fixed_line_pc
----------------------------------------------- */
#fixed_line_pc{
bottom: auto;
top: 40px;
right: 0px;
width: auto;
opacity: 1.0;
}

/* PageTOP */
#pagetop {
bottom: 30px;
right: 30px;
}


/* response
----------------------------------------------- */
.response{
text-align: center;
margin: 30px 0;
font-size: 1.3em;
}
.response .contact-btn{
width: 720px;
margin:20px auto 0;
}
.response .contact-btn .sp{
display: none;
}
.contact-btn a{
width: 90%;
margin:0 auto;
padding:4% 1%;
display: block;
text-decoration: none;
color:#fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.contact-btn.tel a:hover{
color:#fff;
}

.contact-btn.tel .telnum{
background-size: 44px;
padding: 0 0 0 52px;
font-size: 2.5em;
}



} /* 1024px～ メディアクエリ終了 */


/* Menu
-------------------------------------------------------------- */
.menu--list {
  margin: 0 0 1.5em; }
  .menu--list .inner2 {
    padding: 0 20px 1em;
    background: url(../images/common/frame_bg_body.png) repeat-y 50% 0;
    background-size: contain; }
  .menu--list::before, .menu--list::after {
    content: "";
    display: block;
    width: 100%;
    height: 6vw;
    max-height: 40px;
    background: url(../images/common/frame_bg_top.png) no-repeat 50% bottom;
    background-size: contain; }
  .menu--list::after {
    background-image: url(../images/common/frame_bg_foot.png);
    background-position: 50% top; }
  .menu--list h4 {
    border: none;
    font-size: 170%;
    line-height: 1.6;
    padding-left: 17px;
    border-bottom: 3px double #ddd;
    background: url(../images/common/icon_square01.png) no-repeat left 13px;
    background-size: 12px; }
  .menu--list dt span.fl-right, .menu--list li span.fl-right {
    float: right; }
  .menu--list dt::after, .menu--list li::after {
    content: "";
    display: block;
    clear: both; }
  .menu--list dd {
    margin-bottom: 0; }

ul.menulist01 {
  margin: 1em 0 0; }
  ul.menulist01 li {
    margin-bottom: .8em;
    padding: 0 0 .5em 12px;
    border-bottom: 1px #ddd dotted;
    background: url(../images/common/icon_circle02.png) no-repeat left 8px;
    background-size: 6px; }

@media (min-width: 992px) {
  .menu--list .inner2 {
    padding: 0 50px 1em; }
  .menu--list::before, .menu--list::after {
    max-height: 50px; }
  .menu--list div.itemleft {
    float: left;
    width: 47.5%; }
  .menu--list div.itemright {
    float: right;
    width: 47.5%; }

  ul.menulist01 li {
    padding-left: 16px;
    background-position: left 10px;
    background-size: 8px; } }