@charset "utf-8";

/* 初期設定
--------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent; line-height:0; list-style:none;}
body{ margin: 0; padding: 0; font-family:YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;}
.clearfix {display:inline-table;}
* html .clearfix {height: 1%;}  
.clearfix {display: block;}

.pc{ display: block;}
.sp{ display: none;}
.bnr{ display: none;}

.wrapper{ width: 100%; margin: 0 auto; background-size:cover; padding-bottom: 30px;}
/* ヘッダー
--------------------------------------------------------------------------------*/\
header { width: 100%;}
header img{width: 100%; vertical-align: bottom;}


/* ナビゲーション
--------------------------------------------------------------------------------*/
nav{ width: 100%; background: #000;}
nav ul{ text-align: center;}
nav li{ display: inline-block;border-left:1px solid #3d3d3d; width: 350px;}
nav li:last-child{border-right:1px solid #3d3d3d;}
nav .navi01{ background: url(../images/pc/01.png) no-repeat; background-position: center;}
nav .navi02{ background: url(../images/pc/02.png) no-repeat; background-position: center;}
nav .navi03{ background: url(../images/pc/03.png) no-repeat; background-position: center;}
nav li a{color: #fff;text-decoration: none; font-weight:bold; letter-spacing: 0.1em; font-size: 18px; position: relative; display: block;padding: 50px 0 60px 0;line-height:100%; }

nav li a:hover{color: #ffe826;}
nav li span{position: absolute;left: 50%;width: 12px;height: 12px;margin-left: -8px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);box-sizing: border-box; margin-top: 40px;}
nav li:hover span{border-left: 1px solid #ffe826;border-bottom: 1px solid #ffe826;}




/******************************************************************************
main
*******************************************************************************/
#main{ width:100%; margin:0 auto;}
#main h2{ margin:120px auto 60px auto; text-align: center;}
#main .inner{ max-width:1050px; width: 100%; margin:0 auto;}
#main ul{border-left:1px solid #4f4f4f;}
#main ul li{width: 20%; color: #000; text-align: center; float: left;  border-top:1px solid #4f4f4f; border-bottom: 1px solid #4f4f4f;border-right: 1px solid #4f4f4f; box-sizing: border-box; background: #fff;}


#main ul li figure{border-bottom: 1px solid #4f4f4f; box-sizing: border-box; display: block;}
#main ul li figure img{width: 100%;}
#main ul li figure a{ position: relative;}
#main ul li figure figcaption{ padding: 35px 20px 20px 20px;}
#main ul li figure p{ color: #fff; text-align: left; font-size: 15px; line-height: 160%;}
#main ul li figure p:before{font-size: 8px; content:"▶ "; vertical-align:middle;}
#main ul li figure p a{ color: #fff; text-decoration: none;}
#main ul li figure p a:hover{ color: #ffe826; text-decoration:underline;}
#main ul li .tit{font-size: 15px;  padding: 20px 0 18px 0; color: #000;}


/******************************************************************************
info
*******************************************************************************/
#info{ width:100%; margin:0 auto;}
#info h2{ margin:120px auto 60px auto; text-align: center;}
#info .inner{ max-width:1050px; width: 100%; margin:0 auto; background: #fff;border:1px solid #4f4f4f; box-sizing: border-box;}
#info ul{ padding: 40px 50px 30px 50px;}
#info ul li{ padding: 20px 0; font-size: 18px; line-height: 1.4em; }

#info .btn_box{  text-align: center; width: 100%; margin: 100px auto;}
#info .btn_box .btn{ display: inline-block; width: 32%; margin: 0 1%;}
#info .btn_box .btn a{ display:block; background: #000; padding: 45px 0;  color: #fff; text-align: center; font-size: 20px; font-weight: bold; text-decoration: none;}
#info .btn_box .btn a:hover{background: #ffe826; color: #000;}
#info .btn_box .btn span{ display: block; font-size: 15px; text-align: center; padding-top: 20px; }



/* フッター
--------------------------------------------------------------------------------*/
.weblink { text-align: center; margin-bottom: 50px;}
.weblink a{font-size: 15px;color:#000; text-decoration: none;}
.weblink a:hover{color:#666; }
.copyright{ font-size: 12px; text-align: center; color: #4e4e4e; line-height: 180%;}


@media screen and (max-width:1050px){
.pc{ display: none;}
.sp{ display: block;}
nav{ display: none;}
.bnr{ width: 100%; display: block;}

#main h2{ margin:60px auto 20px auto; text-align: center;}
#main h2 img{ height: 50px;}
#main ul{border-left:none;}
#main ul li{width: 100%; float: none;  border-top:none; border-bottom:none;border-right:none; border-top: 1px solid #b5b5b5; text-align: left; box-sizing: content-box;}
#main ul li:last-child{ border-bottom: 1px solid #b5b5b5;}
#main ul li .logo{border-bottom:none; float: none; display: inline-block; width: 25%; margin-right: 3%; vertical-align: middle;}
#main ul li .logo img	{ margin:1px }
#main ul li a{ text-decoration: none !important; padding:1px;}
#main ul li figure{display: none;}
#main ul li .logo img{width: 100%; vertical-align:top;  }
#main ul li .tit{font-size: 15px;  padding:0; display: inline-block; width: 57%; text-align: left; vertical-align: middle; padding: 0; text-decoration: none !important;}
#main ul li .cat_box{ display: none;}
#main ul li .logo:hover .cat_box{display:none;}
#main ul li .mark{ width: 10%; display: inline-block; width: 10px; height: 16px; background: url(../images/sp/mark.png) no-repeat; }

#info{ width:95%; margin:0 auto;}
#info h2{ margin:60px auto 20px auto; text-align: center;}
#info h2 img{ height: 42px;}
#info ul{ padding: 20px 20px 20px 20px;}
#info ul li{ padding: 10px 0; font-size: 13px; line-height: 160%; }

#info .btn_box{  text-align: center; width: 100%; margin: 50px auto;}
#info .btn_box .btn{ display:block; width: 100%; margin: 0 0 40px 0;}
#info .btn_box .btn a{ display:block; background: #000; padding: 30px 0;  color: #fff; text-align: center; font-size: 15px; font-weight: bold; text-decoration: none;}
#info .btn_box .btn a:hover{background: #ffe826; color: #000;}
#info .btn_box .btn span{ display: block; font-size: 13px; text-align: center; padding-top: 15px; }

/* フッター
--------------------------------------------------------------------------------*/
.copyright{ font-size: 7px; text-align: margin-bottom: 30px;}
}

.modal-content { position: relative;}
.modal-content .inner{ width: 70%; background: #fff; margin: 0 auto; padding:10% 5%; border: 2px solid #000; margin-top: 30%;}
.modal-content .inner{}
.modal-content .inner p a{ color: #fff; background: #000; width: 100%; padding:25px 0; text-align:center; font-size: 15px; margin: 0 auto 10px auto; display: block; text-decoration: none;}
.modal-content .inner p a:hover{ color: #fff;}
.modal-content .inner .nomb{ margin-bottom: 0;}
#btn-close-modal {position: absolute; top: 50px; right: 10px; background:url(../images/sp/close.png) no-repeat; width: 30px; height:34px; background-size: cover; }



.lilast	{ border-top: 0!important; }