@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; background: #000; overflow: hidden; }
.inner { width: 100%; max-width: 1100px; margin-right: auto; margin-left: auto; }

/* header ------------------------*/
#header { position: absolute; width: 100%; top: 0; left: 0; right: 0;  z-index: 1; color: #fff; }
#header .sitename img { height: 65px; }
#header > .inner { padding: 40px 0; align-items: center; }

/* gnav ------------------------*/
#gnav {  }

.gmenu > li a,
.gmenu > li p { display: block; color: #fff; position: relative; }
.gmenu > li > a::before,
.gmenu > li > p::before { content: ""; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: #fff; 
transform: scale(0, 1); transform-origin: left top; transition: transform .3s; }
.gmenu > li.h_tel a { padding: 16px; border: 2px solid #fff; }

.gmenu > li > a:hover::before,
.gmenu > #drop-down:hover p::before { transform: scale(1, 1); }

.drop-down-list { position: absolute;}

/* footer ------------------------*/
#footer { margin-top: 100px; background: url("../img/common/fotter_bg.jpg") no-repeat center / cover; }
#footer > .inner { padding: 80px 0; border-bottom: 1px solid #fff; }
#footer .f_logo { margin: 0; }
#footer .f_logo img { height: 240px; }

.f_nav > ul + ul { margin-left: 85px; }
.f_nav > ul > li + li { margin-top: 10px; color: #fff; }
.f_nav > ul > li a { color: #fff; }

.f_nav > ul > li > ul > li { margin-top: 10px; }
.f_nav > ul > li > ul > li a { padding-left: 24px;  position: relative; }
.f_nav > ul > li > ul > li a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; 
width: 12px; height: 1px; background: #fff; }

.copyright { margin:0; padding:1em 0; font-size:.75em; text-align:center; color: #fff; }
.copyright a { color: #fff; }

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

/* title */

/* button */
.button { position:relative; z-index:2; display:inline-block; overflow:hidden; min-width:260px;
  padding:.7em 3em .6em 3em; text-align:center; }
.button.icon:before { content:""; display:inline-block; width:1.2em; height:1.2em; margin:.3em .5em 0 0; vertical-align:top; background:no-repeat center / 100%; }



[class^="dl_layout"] > div { display: -webkit-flex; display: flex; }
[class^="dl_layout"] > div + div { margin-top: 5px; }
[class^="dl_layout"] dt { width: 35%; }
[class^="dl_layout"] dd { -webkit-box-flex: 1; flex: 1; }
[class^="dl_layout"][class*="-daiya"] dt { padding-left: 24px; position: relative; }
[class^="dl_layout"][class*="-daiya"] dt::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto;
width: 10px; height: 10px; background: #942514; transform: rotate(45deg); -webkit-transform: rotate(45deg); }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
	
	

}

/* 960以上(PC) */
@media screen and (min-width: 960px) {
  .menu-button  { display:none; }
	
	.gmenu { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; }
	.gmenu > li + li { margin-left: 40px; }

  .drop-down-list { padding: 1em 0; background: rgba(28,28,32,0.9);}
  .drop-down-list li a {padding: .3em 2em .3em 1em; position: relative; transition: all ease .3s;}
  .drop-down-list li a:hover { color: #c19445;}
  .drop-down-list li a::after { display: block; position: absolute; right: .8em; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; content: "";}

}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }
	.wide_inner,
  .inner, .narrow { width: auto; margin: 0 15px; }

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

  /* gnav ------------------------ */
  #gnav { position: absolute; top: 0; right: 0; z-index: 999; width: 100%; height: 100vh; padding: 100px 16px 80px; 
	background: #0f0f0f; display: none; }
	
	.gmenu > li > a,
  .gmenu > li > p { padding: 1em; margin: 0; }
	.gmenu > li + li:not(:last-child) { border-top: 1px solid #fff; }
  .gmenu > li a:hover::before,
  .gmenu > #drop-down:hover p::before {display: none; transform: none; }

  #drop-down {position: relative;}
  #drop-down::before {content: '';display: block;width: 12px;height: 1px;background: #fff;position: absolute;right: 16px;top: 26px;}
  #drop-down::after {content: '';display: block;width: 12px;height: 1px;background: #fff;position: absolute;right: 16px;top: 26px;transform: rotate(90deg); transition: all ease .3s;}
  #drop-down.active::after { transform: rotate(0);}
  .drop-down-list { position: relative;}
  .drop-down-list #drop-down {position: relative;}
  .drop-down-list li a { padding: .3em 2em .3em 2.5em; position: relative;}
  .drop-down-list li a::before { display: block; position: absolute; left: 1em; top: 50%; transform: translateY(-50%); width: 12px; height: 2px; background: #fff; content: "";}
  .drop-down-list li:last-child { margin-bottom: 1em;}

  /* menuボタン */
	.menu-button { position: absolute;
    top: 0;
    right: 0;
    z-index: 9999; }
  .menu-button { position:relative; z-index:9999; float:right; }
  .menu-button,
  .menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
  .menu-button .h_menu { position:relative; width:30px; height:20px; margin:0 auto; }
  .menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:#fff; }

  .menu-button span:nth-of-type(1) { top: 0; }
  .menu-button span:nth-of-type(2) { top: 9px; }
  .menu-button span:nth-of-type(3) { bottom: 0; }

  .menu-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .menu-button.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }
  .menu-button .label { width:auto; height:auto; margin:0 0 5px; color:#fff;
    text-align:center; line-height:1; font-size:11px; }

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

}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px; }
  


  /* header------------------------*/
	#header .sitename img { height: 45px; }

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

  /* footer------------------------*/
	#footer .f_logo { margin: auto; }
	#footer .f_nav { width: 100%; margin-top: 40px; }
	#footer .f_nav > ul { width: 48%; }
	#footer .f_nav > ul + ul { margin-left: 4%; }
	


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

  /* tel */

  /* title */

  /* button */


}