@charset "utf-8";

header { width: 100%; position: absolute; top: 0; left: 0; z-index: 100; }
header .header-logo p { color: #fff; }
header .header-logo .hana-mark { filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); }
header .header-logo .logo { filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); }

#global-nav { position: absolute; top: calc( 100vh - 80px ); left: 0; height: 80px; width: 100%; }
#global-nav .header-nav { background: rgba(0,0,0,0.5); }
.g-nav li a { color: #fff; }
.g-nav li a::before,
.g-nav li a::after { border-bottom: solid 1px #fff; }


.main-catch { width: 100%; margin: 0 auto; position: relative; }
.main-catch .main-slider { width: 100%; margin: 0 auto; }
.main-catch .main-slider .slide { width: 100%; height: 100vh; margin: 0; position: relative; }
.main-catch .main-slider .slide:first-child { background: url(../images/top/thumb_funeral.jpg) no-repeat center center; background-size: cover; }
.main-catch .main-slider .slide:nth-child(2) { background: url(../images/top/main_slide01.jpg) no-repeat center center; background-size: cover; }
.main-catch .main-slider .slide:nth-child(3) { background: url(../images/top/main_slide02.jpg) no-repeat center center; background-size: cover; }
.main-catch .main-slider .slide h2 { text-shadow: 0px 2px 5px rgba(0,0,0,0.3); float: right; margin: 0 auto; font-size: 40px; line-height: 1.2; font-weight: 700; color: #fff; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 3vw 10px 0; }
.main-catch .main-slider .slide p { text-shadow: 0px 2px 5px rgba(0,0,0,0.3); float: right; margin: 0 auto; font-size: 20px; font-weight: 600; line-height: 1.5; color: #fff; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 0.2rem; padding: 6vw 10px 0; }
.main-catch .main-slider .slide p.point { text-shadow: 0px 2px 5px rgba(0,0,0,0.3); font-size: 30px; }
.main-catch .main-slider .slide .mark { filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); position: absolute; width: 350px; height: 350px; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); }
.main-catch .main-slider .slide .mask { position: absolute; width: 100%; height: 100%; z-index: 5; background: rgba(21,54,86,0.4); padding: 120px 5vw 0; }
.main-slider { width: 100%; height: 100vh; }

.funeral-cont { padding: 5vw 0; }
.funeral-cont .cont-inr { position: relative; }
.funeral-cont .thumb { width: 75%; height: 100%; }
.funeral-cont .thumb img { width: 100%; }
.funeral-cont .txt { position: absolute; top: 60px; right: 60px; z-index: 2; display: flex; flex-direction : row-reverse; background: #7c70a4; padding: 60px; box-shadow: 10px 15px 20px rgba(0,0,0,0.16); }
.funeral-cont .txt h2 { margin: 0 auto; font-size: 36px; line-height: 1.2; font-weight: 600; color: #fff; letter-spacing: 0.2rem; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 0 0 0 10px; }
.funeral-cont .txt p { margin: 0 auto; font-size: 16px; line-height: 1.75; color: #fff; letter-spacing: 0.2rem; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 30px 10px 10px; }
.funeral-cont .txt ul { padding: 60px 0 0; }
.funeral-cont .txt ul li { float: right; margin: 0 auto; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; border-right: 1px solid rgba(255,255,255,0.5); height: 200px; }
.funeral-cont .txt ul li:last-child { border-left: 1px solid rgba(255,255,255,0.5); }
.funeral-cont .txt ul li a { pointer-events: none; display: block; position: relative; font-size: 20px; line-height: 30px; color: #fff; letter-spacing: 0.2rem; padding: 15px; }
.funeral-cont .txt ul li a:after { content: ''; display: block; position: absolute; bottom: 15px; left: 23px; width: 15px; height: 9px; background: url(../images/common/arrow_bottom.svg) no-repeat; background-size: contain; transition: all 0.3s; }
.funeral-cont .txt ul li a:hover:after { bottom: 10px; }

.hall-cont { padding: 5vw; background: #7c70a4; }
.hall-cont .cont-inr { position: relative; }
.hall-cont h2 { font-size: 36px; line-height: 1.2; font-weight: 600; color: #fff; text-align: center; padding: 0 0 30px; }
.hall-cont .disc { font-size: 16px; line-height: 1.5; color: #fff; text-align: center; }
.hall-cont .desc { font-size: 16px; line-height: 1.5; color: #fff; text-align: center; }
.hall-cont .hall-list ul { display: flex; flex-wrap: wrap; padding: 30px 0; }
.hall-cont .hall-list li { width: 25%; padding: 10px; }
.hall-cont .hall-list li img { width: 100%; }
.hall-cont .hall-list li a { display: block; transition: all 0.3s; }.hallCont .hallList li > span { display: block; transition: all 0.3s; }
.hall-cont .hall-list li a:hover { opacity: 0.8; }
.hall-cont .hall-list li dl { position: relative; }
.hall-cont .hall-list li dd { position: absolute; left: 0; bottom: 0; display: inline-block; background: rgba(0,0,0,0.5); color: #fff; font-size: 16px; line-height: 20px; padding: 10px 15px; }
.hall-cont .hall-list li dd span.place { display: inline-block; color: #fff; font-size: 16px; line-height: 20px; }
.hall-cont .hall-list li dd span.area { display: inline; color: #fff; font-size: 14px; line-height: 20px; padding: 0 0 0 5px; }
.hall-cont .more-btn { max-width: 300px; margin: 0 auto; }
.hall-cont .more-btn a { display: block; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 30px; padding: 15px; text-align: center; transition: all 0.3s; }
.hall-cont .more-btn a:hover { background: #fff; color: #7c70a4; }
.hall-cont .more-btn span { display: block; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 30px; padding: 15px; text-align: center; transition: all 0.3s; }
.hall-cont .more-btn span:hover { background: #fff; color: #7c70a4; }

.grave-cont { padding: 5vw; }
.grave-cont .cont-inr { display: flex; max-width: 1100px; margin: 0 auto; box-shadow: 10px 15px 20px rgba(0,0,0,0.16); }
.grave-cont .thumb { width: 50%; }
.grave-cont .thumb img { object-fit: cover; width: 100%; height: 100%; }
.grave-cont .txt { width: 50%; padding: 5vw; background: #7c70a4; }
.grave-cont .txt h2 { font-size: 36px; line-height: 1.2; font-weight: 600; color: #fff; padding: 0 0 30px; }
.grave-cont .txt .disc{ font-size: 16px; line-height: 1.5; color: #fff; padding: 0 0 30px; }
.grave-cont .txt .desc{ font-size: 16px; line-height: 1.75; color: #fff; padding: 0 0 30px; }
.grave-cont .txt ul {  }
.grave-cont .txt ul li { border-bottom: 1px solid rgba(255,255,255,0.5); }
.grave-cont .txt ul li a { display: block; font-size: 16px; line-height: 30px; color: #fff; padding: 10px 0; position: relative; transition: all 0.3s; }
.grave-cont .txt ul li a:after { content: ''; display: block; position: absolute; bottom: 17.5px; right: 15px; width: 6px; height: 10px; background: url(../images/common/arrow_next.svg) no-repeat; background-size: contain; transition: all 0.3s; }
.grave-cont .txt ul li a:hover { padding: 10px 5px; }
.grave-cont .txt ul li a:hover:after { right: 10px; }

.memorial-cont {  }
.memorial-cont ul {  }
.memorial-cont ul li { float: left; width: 25%; }
.memorial-cont ul li a { display: block; transition: all 0.3s; }
.memorial-cont ul li a dl { position: relative; height: 500px;  }
.memorial-cont ul li a dt img { object-fit: cover; width: 100%; height: 500px; }
.memorial-cont ul li a dd { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 24px; font-weight: 600; letter-spacing: 0.2rem; color: #fff; background: rgba(124,112,164,0.8); padding: 0; width: 120px; height: 280px; text-align: center; align-items: center; }
.memorial-cont ul li a:hover { opacity: 0.8; }

.ending-cont { padding: 5vw; background: #7c70a4; }
.ending-cont .cont-inr { display: flex; }
.ending-cont .thumb { width: 50%; }
.ending-cont .thumb img { object-fit: cover; width: 100%; height: 100%; }
.ending-cont .txt { width: 50%; padding: 30px 5vw 0; }
.ending-cont .txt h2 { font-size: 36px; line-height: 1.2; font-weight: 600; color: #fff; padding: 0 0 30px; }
.ending-cont .txt .disc{ font-size: 16px; line-height: 1.5; color: #fff; padding: 0 0 30px; }
.ending-cont .txt .desc{ font-size: 16px; line-height: 1.75; color: #fff; padding: 0 0 30px; }
.ending-cont .more-btn { max-width: 300px; }
.ending-cont .more-btn a { display: block; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 30px; padding: 15px; text-align: center; transition: all 0.3s; }
.ending-cont .more-btn a:hover { background: #fff; color: #7c70a4; }
.ending-cont .more-btn span { display: block; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 30px; padding: 15px; text-align: center; transition: all 0.3s; }
.ending-cont .more-btn span:hover { background: #fff; color: #7c70a4; }

.contact-info { background: #ad4b86; padding: 5vw; position: relative; overflow: hidden; }
.contact-info:after { position: absolute; left: -30px; top: -30px; content: ''; display: block; width: 300px; height: 300px; background: url(../images/common/logo_mark.svg) no-repeat center center; opacity: 0.2; }
.contact-info p { font-size: 24px; text-align: center; color: #fff; text-shadow: 0px 2px 5px rgba(0,0,0,0.2); padding: 0 0 20px; }
.contact-info .tel-cont dl { text-align: center; padding: 0 0 30px; line-height: 70px; }
.contact-info .tel-cont dd { display: inline-block; font-size: 22px; line-height: 25px; padding: 10px; color: #fff; text-shadow: 0px 2px 5px rgba(0,0,0,0.2); }
.contact-info .tel-cont dt { display: inline-block; line-height: 70px; vertical-align: middle; }
.contact-info .tel-cont dt a { pointer-events: none; color: #fff; font-size: 60px; font-family: 'Noto Serif', serif; line-height: 70px; font-weight: 400; text-align: center; vertical-align: middle; text-shadow: 0px 2px 5px rgba(0,0,0,0.2); }
.contact-info .tel-cont dt img { width: 70px; line-height: 70px; margin: 0 5px; vertical-align: middle; }
.contact-info .mail-cont {  }
.contact-info .mail-cont .btn { max-width: 300px; margin: 0 auto; }
.contact-info .mail-cont .btn a { display: block; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 30px; padding: 15px; text-align: center; transition: all 0.3s; }
.contact-info .mail-cont .btn span { display: block; border: 1px solid #fff; color: #fff; font-size: 16px; line-height: 30px; padding: 15px; text-align: center; transition: all 0.3s; }
.contact-info .mail-cont .btn svg { fill: #fff; width: 20px; height: 20px; line-height: 20px; margin: 0 5px; vertical-align: middle; transition: all 0.3s; }
.contact-info .mail-cont .btn a:hover { background: #fff; color: #ad4b86; }
.contact-info .mail-cont .btn a:hover svg { fill: #ad4b86; }
.contact-info .mail-cont .btn span:hover { background: #fff; color: #ad4b86; }
.contact-info .mail-cont .btn span:hover svg { fill: #ad4b86; }

.top-link { padding: 5vw; }
.top-link ul { max-width: 1200px; margin: 0 auto; }
.top-link ul li { float: left; width: 50%; padding: 0 20px; }
.top-link ul li.company a { display: block; background: url(../images/top/bg_company.jpg) no-repeat center top; background-size: cover; font-size: 24px; line-height: 40px; padding: 60px; color: #fff; text-align: center; }
.top-link ul li.faq a { display: block; background: url(../images/top/bg_faq.jpg) no-repeat center center; background-size: cover; font-size: 24px; line-height: 40px; padding: 60px; color: #7c70a4; text-align: center; }

.bnr-list { padding: 3vw; background: #7c70a4; }
.bnr-list ul { display: flex; justify-content: center; flex-wrap: wrap; }
.bnr-list ul li { width: 25%; padding: 10px; }
.bnr-list ul li img { width: 100%; }
.bnr-list ul li a { display: block; transition: all 0.3s; }
.bnr-list ul li a:hover { opacity: 0.8; }
.show-sp { display: none; }


/* ───────────────────────────────────────────────────────────────────────────
 1280px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:1280px){
	.funeral-cont { padding: 8vw 0; }
	.funeral-cont .txt { top: 30px; right: 30px; padding: 40px; }
	.funeral-cont .txt p { padding: 20px 10px 0; }
	footer .foot-inr { padding: 5vw; }
}

/* ───────────────────────────────────────────────────────────────────────────
 1023px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:1023px){
	#container { padding: 0; }
	.menu-box { display: block; width: 80px; height: 80px; float: right; position: relative; z-index: 1000; background: #7c70a4; }
	.menu-box:hover { cursor: pointer; }
	.menu-btn { display: block; position: absolute; top: 39px; right: 20px; width: 36px; height: 2px; background: #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
	.menu-btn:before { content: ''; position: absolute; width: 36px; height: 2px; background: #fff; top: -12px; right: 0; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
	.menu-btn:after { content: ''; position: absolute; width: 36px; height: 2px; background: #fff; bottom: -12px; right: 0; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
	.menu-btn.active { background: transparent; }
	.menu-btn.active:before { -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); top: 0; right: 0; }
	.menu-btn.active:after { -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); bottom: 0; right: 0; }
	#nav-drawer { display: block; padding: 0; position: fixed; top: 0; right: 0; }
	#nav-content { display: block; position: absolute; width: 300px; height: 100vh; top: 0; right: 0; z-index: 999; padding: 80px 0 0; -webkit-overflow-scrolling: touch; transition: .3s ease-in-out; -webkit-transform: translateX(120%); transform: translateX(120%); background: #7c70a4; }
	#nav-content .global-nav ul { text-align: center; margin: 0 auto; }
	#nav-content .global-nav > ul > li { display: block; padding: 0; text-align: center; border-bottom: 1px solid rgba(227,195,105,0.5); }
	#nav-content .global-nav ul li .main-nav { display: block; color: #2E51A3; text-align: left; font-weight: bold; padding: 5px 0; line-height: 40px; }
	#nav-content .global-nav ul li .main-nav:after { display: none; }
	#nav-input:checked ~ #nav-content { -webkit-transform: translateX(0); transform: translateX(0); }
  header .header-logo .logo { width: 200px; }
	header .header-contact { position: fixed; bottom: 0; left: 0; float: none; width: 100%; }
	header .contact-tel { display: block; float: left; width: 50%; background: rgba(0,0,0,0.5); }
	header .contact-tel a { text-align: center; }
	header .contact-tel dl { padding: 5px 10px; }
	header .contact-mail { display: block; float: left; width: 50%; }
	header .btn-mail { float: left; width: 50%; }
	header .btn-harry { float: left; width: 50%; }
	header .btn-mail a { padding: 25px; }
	header .btn-harry a { padding: 25px; }
	footer .copy-cont { padding: 20px 20px 100px; }
	.g-nav { text-align: center; padding: 10px; }
	.g-nav li { display: block; padding: 0; }
	.g-nav li a { display: block; width: 100%; padding: 10px; }
	.g-nav li a:before,
	.g-nav li a:after { width: 50%; border-bottom: solid 1px rgba(255,255,255,0.5); }
	.sp-contact { display: block; }
	.sp-contact .contact-tel { padding: 10px; }
	.sp-contact .contact-tel a { pointer-events: none; color: #fff; display: block; text-align: center; }
	.sp-contact .contact-tel dl { padding: 10px; border: 1px solid rgba(255,255,255,0.5); }
	.sp-contact .contact-tel dd { color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; }
	.sp-contact .contact-tel dt { color: #fff; font-size: 24px; line-height: 30px;font-family: 'Noto Serif', serif; font-weight: 600; text-align: center; vertical-align: middle; }
	.sp-contact .contact-tel dt img { width: 20px; margin: 5px; }
	.sp-contact .contact-mail { display: block; padding: 10px; }
	.sp-contact .btn-mail { margin: 0 auto 10px; }
	.sp-contact .btn-mail a { display: block; background: #fff; color: #7C70A4; font-size: 16px; line-height: 30px; padding: 10px; text-align: center; }
	.sp-contact .btn-harry a { display: block; background: #AD4B86; color: #fff; font-size: 16px; line-height: 30px; padding: 10px; text-align: center; }
	.page-top { right: 20px; bottom: 20px; }
	.main-catch .main-slider .slide .mask { padding: 65vh 5vw 0; }
	.main-catch .main-slider .slide h2 { text-align: center; float: none; font-size: 36px; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; padding: 0 0 10px; }
	.main-catch .main-slider .slide p { text-align: center; float: none; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; padding: 0 0 10px; }
	.main-catch .main-slider .slide p.point { text-align: center; font-size: 28px; }
	.main-catch .main-slider .slide .mark { width: 300px; height: 300px; top:40%; }
	.funeral-cont { padding: 5vw; }
	.funeral-cont .thumb { width: 100%; }
	.funeral-cont .txt { position: static; top: auto; right: auto; display: block; padding: 5vw; box-shadow: none; }
	.funeral-cont .txt h2 { font-size: 36px; letter-spacing: 0; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; padding: 0 0 30px; text-align: center; }
	.funeral-cont .txt p { margin: 0 auto; font-size: 16px; line-height: 1.75; color: #fff; letter-spacing: 0.2rem; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; padding: 0 0 10px; text-align: center; }
	.funeral-cont .txt ul { padding: 30px 0 0; }
	.funeral-cont .txt ul li { float: none; margin: 0 auto; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; border-right: none; border-top: 1px solid rgba(255,255,255,0.5); height: auto; }
	.funeral-cont .txt ul li:last-child { border-left: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
	.funeral-cont .txt ul li a { pointer-events: none; display: block; position: relative; font-size: 16px; line-height: 30px; color: #fff; letter-spacing: 0; padding: 10px; }
	.funeral-cont .txt ul li a:after { content: ''; display: block; position: absolute; bottom: 17.5px; left: auto; right: 10px; width: 9px; height: 15px; background: url(../images/common/arrow_next.svg) no-repeat; background-size: contain; transition: all 0.3s; }
	.funeral-cont .txt ul li a:hover:after { bottom: 17.5px; }
	.hall-cont .hall-list li { width: 50%; }
	.memorial-cont ul li a dd { font-size: 20px; }
	.bnr-list ul li { width: 50%; padding: 20px; }
	.show-sp { display: block; }

}

/* ───────────────────────────────────────────────────────────────────────────
 767px以下の動作
─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width:767px){
	.menu-box { width: 60px; height: 60px; }
	.menu-btn { top: 29px; right: 15px; width: 30px; height: 1px; }
	.menu-btn:before { width: 30px; height: 1px; top: -11px; }
	.menu-btn:after { width: 30px; height: 1px; bottom: -11px; }
	#nav-content { width: 100vw; padding: 60px 0 0; }
	header .header-logo { padding: 10px; }
	header .contact-tel { width: 62%; }
	header .contact-tel a { pointer-events: auto; }
	header .contact-tel dl { padding: 15px 5px; }
	header .contact-tel dd { font-size: 12px; }
	header .contact-tel dt { font-size: 24px; line-height: 30px; }
	header .contact-tel dt img { width: 20px; margin: 5px;}
	header .contact-mail { width: 38%; }
	header .btn-mail { float: none; width: 100%; }
	header .btn-harry { float: none; width: 100%; }
	header .btn-mail a { padding: 5px; font-size: 16px; line-height: 30px; }
	header .btn-harry a { padding: 5px; font-size: 16px; line-height: 30px; }
	.main-catch .main-slider .slide .mask { padding: 60vh 5vw 0; }
	.main-catch .main-slider .slide h2 { font-size: 30px; }
	.main-catch .main-slider .slide p.point { font-size: 24px; }
	.main-catch .main-slider .slide .mark { width: 200px; height: 200px; top:40%; }
	.main-catch .main-slider .slide p.sub-point { display: none; }
	.funeral-cont { padding: 10vw 5vw; }
	.funeral-cont .txt { padding: 10vw 5vw; }
	.funeral-cont .txt h2 { font-size: 28px; padding: 0 0 20px; }
	.funeral-cont .txt p { line-height: 1.5; text-align: left; }
	.funeral-cont .txt p br { display: none; }
	.funeral-cont .txt ul { padding: 20px 0 0 ; }
	.hall-cont { padding: 10vw 5vw; }
	.hall-cont h2 { font-size: 28px; padding: 0 0 20px; }
  .hall-cont .disc { text-align: left; }
  .hall-cont .desc { text-align: left; }
	.hall-cont .hall-list li { width: 100%; }
	.grave-cont { padding: 10vw 5vw; }
	.grave-cont .cont-inr { display: block; }
	.grave-cont .thumb { width: 100%; }
	.grave-cont .txt { width: 100%; padding: 10vw 5vw; }
	.grave-cont .txt h2{ font-size: 28px; padding: 0 0 20px; text-align: center; }
	.memorial-cont ul li { width: 50%; }
	.memorial-cont ul li a dl { height: 300px; }
	.memorial-cont ul li a dt img { height: 300px; }
	.memorial-cont ul li a dd { font-size: 16px; width: 100px; height: 200px; }
	.ending-cont { padding: 10vw 5vw; }
	.ending-cont .cont-inr { display: block; }
	.ending-cont .thumb { width: 100%; }
	.ending-cont .txt { width: 100%; padding: 10vw 0; }
	.ending-cont .txt h2{ font-size: 28px; padding: 0 0 20px; text-align: center; }
	.ending-cont .more-btn { margin: 0 auto; }
	.contact-info { padding: 10vw 5vw; }
	.contact-info p { font-size: 16px; }
	.contact-info .tel-cont dl { line-height: 40px; }
	.contact-info .tel-cont dd { display: block; font-size: 14px; line-height: 18px; padding: 2px 5px; text-align: center; }
	.contact-info .tel-cont dd br { display: none; }
	.contact-info .tel-cont dt { line-height: 40px; }
	.contact-info .tel-cont dt a { pointer-events: auto; font-size: 36px; line-height: 40px; }
	.contact-info .tel-cont dt img { width: 28px; line-height: 30px; margin: 5px; }
	.top-link ul li { float: none; width: 100%; padding: 10px; }
	.top-link ul li.company a { font-size: 18px; line-height: 24px; padding: 30px; }
	.top-link ul li.faq a { font-size: 18px; line-height: 24px; padding: 30px; }
	.bnr-list { padding: 5vw 0; }
	.bnr-list ul li { padding: 10px; }
	footer .left-cont { float: none; width: 100%; }
	footer .left-cont .logo { margin: 0 auto; }
	footer .right-cont { float: none; width: 100%; }
	footer .contact-mail { padding: 10px 0; }
	footer .contact-mail li { padding: 10px 5px; }
	footer .contact-mail li a { padding: 20px 0; }
	footer .foot-nav { display: none; }
	footer .prof-cont { padding: 10px 5px; }
	footer .prof-cont dl { padding: 10px 0; }
	footer .prof-cont dt { float: none; width: 100%; }
	footer .prof-cont dd { float: none; width: 100%; }
	footer .copy-cont { padding: 0 5vw 120px; }
	footer .copy-cont .foot-sub-nav { float: none; }
	footer .copy-cont .foot-sub-nav li { display: block; float: left; width: 50%; padding: 0; }
	footer .copy-cont .foot-sub-nav li a { padding: 10px 0; font-size: 14px; line-height: 20px; text-align: center; }
	footer .copy-cont .copyright { float: none; display: block; text-align: center; padding: 20px 0; }


}