:root {
  --color-c1 :rgba(80,80,80,1);
  --color-c2 :rgba(145,125,90,1);
  --color-tp :rgba(255,255,255,0);
  --bgc-c1 :rgba(45,38,34,1);
}

body { color: var(--color-c1); background-color: #000 }
#wrapper { background-color: #fff }

.color-c2 { color: var(--color-c2)}
.color-c3 { color: rgba(255,255,255,0.5)}
.color-c4 { color: rgba(80,80,80,0.2)}
.bgc-c1 { background-color: var(--bgc-c1)}
.bgc-c2 { background-color: var(--color-c2)}
.tt-c1 { font-size: calc(48px + 60 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-c1 { font-size: 108px }}
.tt-c2 { font-size: calc(48px + 60 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-c2 { font-size: 90px }}
.list-indent-c1 li { padding-left: 1rem; text-indent: -1rem; line-height: 1.9 }

.px-c1 { padding-right: 25px !important; padding-left: 25px !important }
@media ( min-width: 1200px ){ .px-c1 { padding-right: 0 !important; padding-left: 0 !important }}
.mt-50 { margin-top: 50px } @media ( min-width: 992px ){ .mt-50 {margin-top: 0 }}
@media ( min-width: 992px ){ .nmt-c1 { margin-top: -100px }}
@media ( min-width: 992px ){ .nmt-c2 { margin-top: -132px }}
@media ( min-width: 1200px ){ .nmt-c2 { margin-top: -176px }}
.lh-c1 { line-height: 2.1 }
.hr-c1 { width: 100px; border-bottom: solid 1px var(--color-c1)}
.border-c1 { border-left: solid 1px var(--color-c2)}
.icon-c1 { width: 10px; height: 10px; background: var(--color-c2); transform: rotate(45deg); position: absolute; top: 13px; left: -21px }
@media ( min-width: 768px ){ .icon-c1 { width: 15px; height: 15px; background: var(--color-c2); transform: rotate(45deg); position: absolute; top: 18px; left: -55px }}
@media ( min-width: 992px ){ .icon-c1 { width: 15px; height: 15px; background: var(--color-c2); transform: rotate(45deg); position: absolute; top: 25px; left: -55px }}

.border-c2 { text-align: center; display: inline-block; margin: 0; border-top: solid 2px var(--color-c2); position: relative }
.border-c2:after{ content: ""; border-top: solid 1px var(--color-c2); position: absolute; top: 3px; left: 0; width: 100% }
@media ( min-width: 992px ){ .border-c2,.border-c2:after { border-top: none }}

.border-c3 { text-align: center; display: inline-block; margin: 0; border-top: solid 2px var(--color-c2); position: relative }
.border-c3:after{ content: ""; border-top: solid 1px var(--color-c2); position: absolute; top: 3px; left: 0; width: 100% }

.border-c4 { border: solid 1px rgba(145,125,90,0.5)}

/* bg mv */
.bgc-layout-c1 { background-image: linear-gradient( 90deg, var(--color-tp)  0%,var(--color-tp)  40%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%)}
.bgc-layout-c1-end { background-image: linear-gradient( 90deg, rgba(255,255,255,1)  0%,rgba(255,255,255,1)  60%,var(--color-tp) 60%,var(--color-tp) 100%)}

.bgi-c1 { height: 200px; background: url("../img/bg1.jpg") top center / cover no-repeat }
@media ( min-width: 768px ){ .bgi-c1 { height: 340px; background: url("../img/bg1.jpg") bottom center / cover no-repeat }}

.mv-c2 { width: 100%; height: 520px; background: url("../img/mv1.jpg") bottom center / cover no-repeat }
@media ( min-width: 992px ){ .mv-c2 { height: 100%; background: url("../img/mv1.jpg") top center / cover no-repeat }}

.inner-mv-c1 { width: 100%; height: 260px; background: url("../img/inner-mv1.jpg") bottom center / cover no-repeat }
@media ( min-width: 768px ){ .inner-mv-c1 { height: 560px; background: url("../img/inner-mv1.jpg") top center / cover no-repeat }}

.inner-mv-c2 { width: 100%; height: 260px; background: url("../img/inner-mv2.jpg") bottom center / cover no-repeat }
@media ( min-width: 768px ){ .inner-mv-c2 { height: 560px; background: url("../img/inner-mv2.jpg") top center / cover no-repeat }}

.inner-mv-c3 { width: 100%; height: 260px; background: url("../img/inner-mv3.jpg") bottom center / cover no-repeat }
@media ( min-width: 768px ){ .inner-mv-c3 { height: 560px; background: url("../img/inner-mv3.jpg") top center / cover no-repeat }}

.inner-mv-c4 { width: 100%; height: 260px; background: url("../img/inner-mv4.jpg") bottom center / cover no-repeat }
@media ( min-width: 768px ){ .inner-mv-c4 { height: 560px; background: url("../img/inner-mv4.jpg") top center / cover no-repeat }}

/* header */
.header-c2-sp { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 0 }
.hbg-c1 { display: flex; width: 50px; height: 50px; padding-right: 15px;
  justify-content: flex-end; align-items: center; z-index: 100; cursor: pointer }
.hbg-c1 span,
.hbg-c1 span:before,
.hbg-c1 span:after { content: ''; display: block; height: 2px; width: 25px; background: var(--color-c1); transition: .3s; position: absolute; z-index: 9999 }
.hbg-c1 span:before { bottom: 8px }
.hbg-c1 span:after { top: 8px }
.hbg-c1.op span { background: rgba(255,255,255,0)}
.hbg-c1.op span::before { bottom: 0; transform: rotate(45deg)}
.hbg-c1.op span::after { top: 0; transform: rotate(-45deg)}
.gnav-c1 { position: absolute; top:100%; right: -100%; background-color: rgba(255,255,255,0.95); height: 100vh; width: 100%; transition: .4s ease-in-out; border-top: solid 1px rgba(255,255,255,0.05); opacity: 0 }
.gnav-c1.active { right: 0; opacity: 1 }
.gnav-c1 ul li { margin-bottom: 20px; white-space: nowrap }

/* table */
.table-c1 th { padding: 15px; line-height: 1.7; border-bottom: solid 1px rgba(80,80,80,0.2); white-space: nowrap }
.table-c1 td { padding: 15px; line-height: 1.7; border-bottom: solid 1px rgba(80,80,80,0.2)}

/* footer */
.footer-logo-c1 { width: 160px }
.footer-nav-c1 li { margin-bottom: 20px; white-space: nowrap }
@media ( min-width: 768px ){ .footer-nav-c1 li { margin-bottom: 0; margin-right: 20px; padding-right: 20px; border-right: solid 1px #fff }}
@media ( min-width: 768px ){ .footer-nav-c1 li:last-child { border-right: none }}

/* form */
.wpcf7-tit-c1 { padding-top: 20px !important }
@media (min-width:768px){ .wpcf7-tit-c1 { padding-top: 30px !important }}

.wpcf7-tit-c2 { padding-top: 20px !important; padding-bottom: 10px }
@media (min-width:768px){ .wpcf7-tit-c2 { padding-top: 30px !important; padding-bottom: 20px }}

input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 5px 10px;
	margin-top: 8px;
	border: 1px solid rgba(210,210,210,1);
	border-radius: 3px;
}

@media (min-width:768px){ input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-top: 12px;
	border: 1px solid rgba(210,210,210,1);
	border-radius: 3px;
}}

textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: rgba(255,255,255,1);
}

input.wpcf7-submit {
	width: 100%;
  padding: 10px;
	background: var(--bgc-c1);
	color: #fff;
	border: none;
	border-radius: 5px;
}

form .wpcf7-response-output { font-size: 14px; line-height: 1.5; padding: 10px !important; border: solid 2px rgba(0,0,0,0.15) !important }

span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
  font-size: 13px;
  margin-top: 5px;
	color: red;
}