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

/*---------- 共通 ----------*/
#wrapper { min-width:1000px; overflow:hidden; }

.hannari { font-family:"Hannari","游明朝体", "Yu Mincho", YuMincho,"ヒラギノ明朝 ProN W6", "HiraMinProN-W6","HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; font-weight:normal;  }
.dosis { font-family:'Dosis', sans-serif; }
.tangerine  { font-family:'Tangerine', cursive; font-weight:normal; }
.color_re { color:#c33; }

.pc_none { display:none; }
.inner { position:relative; max-width:1170px; width:100%; margin-left:auto; margin-right:auto; }
.inner_s { position:relative; max-width:1080px; width:100%; margin-left:auto; margin-right:auto; }

.skew { transform:skewY(7deg); transform-origin:top left; overflow:hidden; }
.skew_inner { transform:skewY(-7deg); transform-origin:top left; }

.bg_gn, .bg_wt { position:relative; z-index:1; }
.bg_gn { background:#1f3331; color:#fff; }
.bg_wt { background:#fff; }
.bg_gn:before, .bg_gn:after, .bg_wt:before, .bg_wt:after { position:absolute; content:""; width:0; height:0; border-style:solid; }
.bg_gn:before, .bg_wt:before { top:-150px; right:0; border-width:150px 0 0 2000px; }
.bg_gn:before { border-color:transparent transparent transparent #1f3331; }
.bg_wt:before { border-color:transparent transparent transparent #fff; }
.bg_gn:after, .bg_wt:after  { bottom:-150px; left:0; border-width:0 2000px 150px 0; }
.bg_gn:after { border-color:transparent #1f3331 transparent transparent; }
.bg_wt:after { border-color:transparent #fff transparent transparent; }
.bg_gn a { color:#fff; }
.bg_sozai { width:100%; background-color:#eee; background-image:url(../img/bg_sozai.png); }

/* color */
.red { color: #c30000; }

/* title */
.conttl1 .jp, .conttl2, .conttl3 .jp, .conttl4, .conttl5 .jp, .conttl7
 { font-family:"Hannari","游明朝体", "Yu Mincho", YuMincho,"ヒラギノ明朝 ProN W6", "HiraMinProN-W6","HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; font-weight:normal; }

.conttl1 { position:relative; }
.conttl1 .jp { font-size:26px; line-height:2; letter-spacing:4px; }
.conttl1 .en { position:absolute; letter-spacing:1px; transform:rotate(-15deg); color:#325d58; }
.conttl1 .en .dosis { font-size:12px; font-weight:normal; }
.conttl1 .en .tangerine { font-size:18px; }
.bg_gn .conttl1 .en { color:#fff; opacity:0.2; }

.conttl2 { position:relative; font-size:26px; letter-spacing:2px; padding-bottom:15px; text-align:center; margin-bottom:60px; }
.conttl2:after { position:absolute; content:""; border-bottom:1px solid #203432; width:80px; left:50%; bottom:0; transform:translateX(-50%); }
.bg_gn .conttl2 { color:#fff; }
.bg_gn .conttl2:after { border-color:#fff; }

.conttl3 { text-align:center; }
.conttl3 .en { color:#203432; font-family:'Tangerine', cursive; font-size:51px; font-weight:normal; letter-spacing:6px; }
.bg_gn .conttl3 .en { color:#fff; }
.conttl3 .jp { display:block; font-size:17px; color:#999; letter-spacing:2px; margin-top:-50px; }

.conttl4 { position:relative; font-size:20px; padding:7px 20px; border-bottom:1px solid; border-left:1px solid; border-color:#a0a0a0; margin-bottom:50px; }
.conttl4:before { position:absolute; content:""; border-bottom:1px solid; border-left:1px solid; border-color:#a0a0a0; top:4px; left:-4px; right:4px; bottom:-4px; }

.conttl5 { position:relative; display:inline-block; left:50%; transform:translateX(-50%); }
.conttl5 .jp { font-size:35px; line-height:2; letter-spacing:4px; }
.conttl5 .en { position:absolute; top:-20px; left:-40px; letter-spacing:1px; transform:rotate(-15deg); color:#325d58; font-size:18px; }
.bg_gn .conttl5 .jp { color:#fff; }
.bg_gn .conttl5 .en { color:#fff; opacity:0.2; }

.conttl6 { padding:.5em 1em; line-height:1; font-size:1.2em; font-weight:normal; color:#fff; background-color:#325d58; }
.conttl7 + .conttl6 { margin-top:-.2em; }

.conttl7 { position:relative; margin-bottom:1em; }
.conttl7::before { content:""; position:absolute; top:49%; left:0; right:0; height:1px; background:#a0a0a0; z-index:-1; }
.conttl7 > span { display:inline-block; font-size:1.8em; background:#fff; }
.conttl7 > span::after { content:attr(data-label); display:inline-block; font-family:'Tangerine', cursive; padding:0 15px; color:#203432; }

/* btn */
.btn1 { display:inline-block; }
.btn1 a, .btn1 input { min-width:250px; width:100%; position:relative; display:block; border:1px solid; border-color:#a0a0a0; font-size:17px; padding:3px 40px 3px 20px; margin:0 4px 4px 0; transition:all 0.2s; }
.btn1 input { min-width:200px; padding:3px 20px; }
.btn1 a:before, .btn1 a:after { position:absolute; content:""; border-color:#a0a0a0; }
.btn1 a:before { border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; top:4px; left:4px; right:-4px; bottom:-4px; }
.btn1 a:after { border-top:1px solid; border-right:1px solid; width:7px; height:7px; transform:rotate(45deg) translateY(-50%); top:50%; right:20px; }
.bg_gn .btn1 a:before, .bg_gn .btn1 a:after { border-color:#fff; }
.btn1 a:hover { background-color:#1f3331; border-color:#1f3331; color:#fff; margin:4px 0 0 4px; }
.btn1 a:hover:before { border:none; }
.btn1 input:hover { background-color:#1f3331; border-color:#1f3331; color:#fff; }
.bg_gn .btn1 a:hover { background-color:#fff; color:#1f3331; }
.bg_gn .btn1 a:hover:after { border-color:#1f3331; }
.btn2 a, .btn2 span { position:relative; display:block; border:1px solid #1f3331; background-color:#1f3331; color:#fff; text-align:center; transition:all 0.5s; }
.btn2 a:after, .btn2 span:after { position:absolute; content:""; border-color:#fff; border-top:1px solid; border-right:1px solid; width:7px; height:7px; transform:rotate(45deg) translateY(-50%); top:50%; right:20px; }
.btn2 a:hover, .btn2 span:hover { background-color:#fff; color:#222; }
.btn2 a:hover:after, .btn2 span:hover:after { border-color:#1f3331; }

/* table */
.tbl { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0 20px; }
.tbl th { border:1px solid #a0a0a0; width:25%; padding:10px 20px; font-weight:400; }
.tbl td { width:75%; padding-left:40px; }

/* gnav */
#nav-toggle { display:none; }
#gnav .nav li { display:inline-block; }
#gnav .nav li a { position:relative; display:block; }
#gnav .nav li a:before { content:""; position:absolute; display:block; border-bottom:1px solid #1f3331; width:0; height:0; left:0; -webkit-transition:.4s ease 0s; transition:.4s ease 0s; }
#gnav .nav li a:hover { text-decoration:none; }
#gnav .nav li a:hover:before { width:100%; }

#gnav .gbtn { text-align:center; }
#gnav .gbtn a { display:inline-block; width:250px; padding:0 30px 0 15px; position:relative; border:1px solid #a0a0a0; }
#gnav .gbtn a:after {
  position:absolute; top:50%; right:15px; margin-top:-3px;
  content:""; display:block; width:6px; height:6px;
  border-top:1px solid; border-right:1px solid; transform:rotate(45deg) translateY(-50%); }

/* 展示販売会のお知らせ */
.hanbaikai .conbox { position:relative; display:inline-block; border:1px solid #fff; padding:50px 90px 60px; z-index:9999; }
.hanbaikai .conbox .scroll { max-height:150px; overflow-y:auto; }
.hanbaikai .conbox .scroll p { line-height:1.8; }

/* footer */
#pagetop { position:fixed; bottom:10px; right:15px; width:100px; height:80px; z-index:9999; }
#pagetop a { position:relative; display:block; background-color:#fff; font-size:25px; border:1px solid #a0a0a0; text-align:center; letter-spacing:1px; margin:0 4px 4px 0; }
#pagetop a:before { position:absolute; content:""; border-bottom:1px solid #a0a0a0; border-right:1px solid #a0a0a0; top:4px; left:4px; right:-4px; bottom:-4px; }
#pagetop a:hover { background-color:#1f3331; border-color:#fff; color:#fff; margin:4px 0 0 4px; }
#pagetop a:hover:before { border:none; }

footer { background-image:url(../img/f_img.jpg), url(../img/f_bg.png); background-repeat:no-repeat; background-size:contain; background-position:center top, right bottom; text-align:center; padding:10% 0 30px; }
footer, footer a { color:#666; }
footer .f_inner { max-width:1170px; margin:0 auto; }
footer .fnav_box { max-width: 600px; margin: 30px auto; align-items: flex-end; -webkit-align-items: flex-end; }
footer .fnav_box .logo { width: 20%; text-align: center; }
footer .fnav_box > ul { width: 30%; }
footer .fnav_box .nav_l { text-align: right; }
footer .fnav_box .nav_r { text-align: left; }
footer .fnav_box > ul  li { width: 100%; }
footer .fnav_box > ul  li:nth-child(n+2) { margin-top: 3px; }


footer .fnav_box02 { max-width: 580px; margin: 0 auto; padding-top: 1em;}
.fnav_box02 ul { margin: .3em .9em;}
.fnav_box02 .ttl { position: relative; display: inline-block; padding: 0 65px; text-align: center;}
.fnav_box02 .ttl::before,.fnav_box02 .ttl::after {position: absolute;top: calc(50% - 1px);width: 50px;height: 6px;
	content: '';	border-top: solid 1px #a0a0a0;}
.fnav_box02 .ttl::before {  left: 0;}
.fnav_box02 .ttl::after { right: 0;}

footer .address { font-size:14px; /*margin-top:50px;*/ }
footer .address .name { margin-right:3em; }
footer .address .add { margin-right:1em; }
footer .copy { font-size:11px; }
footer .btn_line, footer .btn_insta { margin: 30px auto; }

.btn_insta .tangerine { font-size: 2rem; line-height:0; }

@media screen and (min-width: 1001px) {
  #gnav { display:-webkit-flex; display:flex; }
  #gnav .gbtn { margin-left:15px; background-color: #fff; }
}

@media screen and (min-width: 1201px) {
  header .inner_s { max-width:1170px; }
}

@media screen and (max-width: 1200px) {
  .inner, .inner_s { padding:0 50px; max-width:none; }

  .hanbaikai .conbox { padding:40px 60px 50px; }
  .hanbaikai .conbox .conttl2 { margin-bottom:30px; }

  footer .fnav { margin:20px auto 50px; padding:0 30px; }
}

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

	.sp_only { display: none; }

}

/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width: 1000px) {
#wrapper { min-width:inherit; }
.pc_none { display:inherit; }
.tb_none { display:none; }

.conttl4 { margin-bottom:30px; }
.conttl4 + .conttl6 { margin-top:0; }

/*header { padding:20px 0 !important; }*/

.tbl td { padding-left:20px; }

/* gnav */
#gnav {  }
#gnav { position: absolute;
  top: -722px;/* 開いてないときは画面外に配置 */
  left:0; width:100%;
  margin:0; padding:40px 0;
  text-align:left;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  z-index:4000;
  max-width:none !important;
	background: #1f3331;
}
#gnav .nav li { display:block !important; background-color:rgba(255,255,255,0.93); margin-right:0; }
#gnav .nav li:nth-child(n+2) { margin-left:0; }
#gnav .nav li:after { display:none; }
#gnav .nav li a { display:block; font-size:15px; border-bottom:1px solid #fff; color:#fff; background-color:#1f3331; padding:13px; }

#gnav .gbtn { margin-top:30px; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; justify-content:center; -webkit-justify-content:center; }
#gnav .gbtn > li { margin:5px; }
#gnav .gbtn a { color:#fff; padding-top:10px; padding-bottom:10px; }


/* Toggle Button */
#nav-toggle { position: absolute; /*right:40px;*/ top:0; width:37px; height:40px; cursor: pointer; z-index: 5000; display: block; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height:3px; width:100%; background:#1f3331; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top:0; font-size:10px; background:none; color:#1f3331; height:auto; letter-spacing:2px; }
#nav-toggle span:nth-child(2) { top:21px; }
#nav-toggle span:nth-child(3) { top:30px; }
#nav-toggle span:nth-child(4) { top:39px; }
#gnav .nav ul li a, header.fixed #gnav .nav ul li a { width:100%; padding:12px 40px; background-color:#d2d2d2; }

  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) { color:#fff; }
  .open #nav-toggle span:nth-child(2) { top:32px; -webkit-transform:rotate(315deg); -moz-transform:rotate(315deg); transform:rotate(315deg); background-color:#fff; }
  .open #nav-toggle span:nth-child(3) { width:0; left:50%; }
  .open #nav-toggle span:nth-child(4) { top:32px; -webkit-transform:rotate(-315deg); -moz-transform:rotate(-315deg); transform:rotate(-315deg); background-color:#fff; }

  /* #gnav .nav スライドアニメーション */
  .open #gnav { top:0; }
  .gnav_top { display:inherit !important; }

footer .address { margin-top:30px; }
footer .btn_line,footer .btn_insta { max-width: 93%; }

}

@media screen and (max-width: 700px) {
.btn1 { display:block; max-width:280px; }
}

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 599px) {
body { line-height:1.8; }

.tb_none { display:inherit; }
.sp_none { display:none; }
.sp_only { display: block; }
.inner, .inner_s { padding:0 15px; }

.conttl1 .jp { font-size:20px; }
.conttl2 { margin-bottom:1.5em; font-size:1.3em; }
.conttl4 { font-size:17px; padding:0 10px 5px; line-height:1.8; }
.conttl5 .jp { font-size:20px; }
.conttl5 .en { font-size:16px; }

.tbl th, .tbl td { width:100%; display:block; }
.tbl th { padding:3px 10px; }
.tbl td { padding:3px 10px 0; line-height:2; }

.hanbaikai .conttl2 { font-size:19px; }
.hanbaikai .conbox { padding:15px 20px; }
.hanbaikai .conbox .scroll p { line-height:2.5; }
.hanbaikai .conbox .scroll::-webkit-scrollbar{ width:5px; }
.hanbaikai .conbox .scroll::-webkit-scrollbar-thumb{ background:#aaa; border-radius:15px; }
.hanbaikai .conbox .scroll::-webkit-scrollbar-track-piece:start{ background:#fff; border-radius:15px; }
.hanbaikai .conbox .scroll::-webkit-scrollbar-track-piece:end{ background: #fff; border-radius:15px; }

 /* #gnav .nav スライドアニメーション */

#nav-toggle { right:25px; }

#pagetop { width:80px; height:60px; }
#pagetop a { font-size:20px; }
footer .fnav_box { margin: 0 auto; padding: 0 15px; }
footer .fnav_box .logo { order: 1; width: 100%; margin-bottom: 20px; }
footer .fnav_box .logo img { width: 45px; }
footer .fnav_box .nav_l { order: 2; width: 49%; text-align: center; }
footer .fnav_box .nav_r { order: 3; width: 49%; text-align: center; }
footer .fnav_box > ul li:nth-child(n+2) { margin-top: 7px; }
footer .fnav_box > ul li a  { display:block; background-color:rgba(255,255,255,0.7); border:1px solid #bcbcbc; padding:0 10px; font-size:14px; line-height:2; }

footer .fnav_box02 { margin: 2em auto 3em;}
footer .fnav_box02 li{width: 100%;}
footer .fnav_box02 li+li{margin-top:7px;}
footer .fnav_box02 > ul li a  { display:block; background-color:rgba(255,255,255,0.7); border:1px solid #bcbcbc; padding:0 10px; font-size:14px; line-height:2; }
footer .fnav_box02 .ttl{margin-bottom: 1em;}

footer .address { padding:0 30px; line-height:2; }
footer .address .name, footer .address .add { margin-right:0; }
}