@charset "UTF-8";

/* ==========================================================================
   1. CSS Variables (:root)
   ========================================================================== */
:root { --font-size-12: 0.75rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-18: 1.125rem; --font-size-20: 1.25rem; --font-size-24: 1.5rem; --font-size-26: 1.625rem; --font-size-28: 1.75rem; --font-size-30: 1.875rem; --font-size-36: 2.25rem; --font-size-40: 2.5rem; --font-size-50: 3.125rem; --font-size-60: 3.75rem; --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; --font-weight-900: 900; }

/* ==========================================================================
   2. Modern Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; }
body { width: 100%; margin: 0; padding: 0; position: relative; font-family: var(--font-base, sans-serif); font-size: var(--font-size-14); font-weight: var(--font-weight-400); line-height: 1; color: var(--color-text, #333333); background-color: var(--color-bg, #ffffff); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { font-weight: inherit; }
h2, h3, h4, h5 { line-height: 1.5; }
p, li, dd, dt, .lh17 { line-height: 1.7; }
.lh12 { line-height: 1.2; }
.lh15 { line-height: 1.5; }

a { color: var(--color-link, #222222); text-decoration: none; transition: opacity 0.3s, color 0.3s; }
a.ubdr { text-decoration: underline; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid var(--color-border, #cccccc); margin: 1em 0; }

img, svg, video { max-width: 100%; height: auto; border: none; vertical-align: bottom; }
.objFit img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

img.miniimage { display: none; }
@media screen and (min-width: 896px) { img.spimage { display: none; } img.bigimage { display: block; } }
@media screen and (max-width: 896px) { img.spimage { display: block; } img.bigimage { display: none; } }

/* ==========================================================================
   3. Utility Classes
   ========================================================================== */
.rlt { position: relative; }
.blk { display: block; }
.inlb { display: inline-block; letter-spacing: normal; }
.vtop { vertical-align: top; }
.vmid { vertical-align: middle; }
.vbtm { vertical-align: bottom; }

.flex { display: flex; flex-wrap: wrap; }
.flexNw { flex-wrap: nowrap; }
.flRev { flex-direction: row-reverse; }
.flCol { flex-direction: column; }
.flColRev { flex-direction: column-reverse; }

.alStart { align-items: flex-start; }
.alEnd { align-items: flex-end; }
.alCent { align-items: center; }

.jcCent { justify-content: center; }
.jcSb { justify-content: space-between; }
.jcEnd { justify-content: flex-end; }

.txtCent { text-align: center; }
.txtRight { text-align: right; }
.txtLeft { text-align: left !important; }

.fontSerif { font-family: var(--font-serif); }
.fontEn { font-family: var(--font-en); }
.fontEn2 { font-family: var(--font-en2); }

.txt400 { font-weight: var(--font-weight-400); }
.txt500 { font-weight: var(--font-weight-500); }
.txt600 { font-weight: var(--font-weight-600); }
.txt700 { font-weight: var(--font-weight-700); }
.txt900 { font-weight: var(--font-weight-900); }
.txtRD { color: var(--color-accent, #cc0000); }

.txt12 { font-size: var(--font-size-12); }
.txt14 { font-size: var(--font-size-14); }
.txt16 { font-size: var(--font-size-16); }
.txt18 { font-size: var(--font-size-18); }
.txt20 { font-size: var(--font-size-20); }
.txt24 { font-size: var(--font-size-24); }
.txt26 { font-size: var(--font-size-26); }
.txt28 { font-size: var(--font-size-28); }
.txt30 { font-size: var(--font-size-30); }
.txt36 { font-size: var(--font-size-36); }
.txt40 { font-size: var(--font-size-40); }
.txt50 { font-size: var(--font-size-50); }
.txt60 { font-size: var(--font-size-60); }

.mb5 { margin-bottom: 0.3125rem; }
.mb10 { margin-bottom: 0.625rem; }
.mb15 { margin-bottom: 0.9375rem; }
.mb20 { margin-bottom: 1.25rem; }
.mb30 { margin-bottom: 1.875rem; }
.mb40 { margin-bottom: 2.5rem; }
.mb50 { margin-bottom: 3.125rem; }
.mb60 { margin-bottom: 3.75rem; }
.mb80 { margin-bottom: 5rem; }
.mb100 { margin-bottom: 6.25rem; }
.mb120 { margin-bottom: 7.5rem; }

.mt20 { margin-top: 1.25rem; }
.mt30 { margin-top: 1.875rem; }
.mt40 { margin-top: 2.5rem; }
.mt50 { margin-top: 3.125rem; }
.mt60 { margin-top: 3.75rem; }
.mt80 { margin-top: 5rem; }
.mt100 { margin-top: 6.25rem; }

.pt10 { padding-top: 0.625rem; }
.pt20 { padding-top: 1.25rem; }
.pt30 { padding-top: 1.875rem; }
.pt40 { padding-top: 2.5rem; }
.pt50 { padding-top: 3.125rem; }
.pt60 { padding-top: 3.75rem; }
.pt70 { padding-top: 4.375rem; }
.pt80 { padding-top: 5rem; }

.pb10 { padding-bottom: 0.625rem; }
.pb20 { padding-bottom: 1.25rem; }
.pb30 { padding-bottom: 1.875rem; }
.pb40 { padding-bottom: 2.5rem; }
.pb50 { padding-bottom: 3.125rem; }
.pb60 { padding-bottom: 3.75rem; }
.pb70 { padding-bottom: 4.375rem; }
.pb80 { padding-bottom: 5rem; }

.ptb40 { padding: 2.5rem 0; }
.ptb80 { padding: 5rem 0 3.125rem; }

@media screen and (min-width: 896px) { .pcbr { display: block; } .spbr { display: none; } }
@media screen and (max-width: 896px) {
  .pcbr { display: none; } .spbr { display: block; }
  .txt16 { font-size: var(--font-size-14); }
  .txt18, .txt20 { font-size: var(--font-size-16); }
  .txt24, .txt26 { font-size: var(--font-size-20); }
  .txt30 { font-size: 1.375rem; }
  .txt36, .txt40 { font-size: var(--font-size-24); }
  .txt50, .txt60 { font-size: var(--font-size-30); }
  .mb40, .mb50 { margin-bottom: 1.875rem; }
  .mb60 { margin-bottom: 2.5rem; }
  .mb80 { margin-bottom: 3.125rem; }
  .mb100, .mb120 { margin-bottom: 3.75rem; }
  .pt40, .pt50 { padding-top: 1.875rem; }
  .pt60, .pt70 { padding-top: 2.5rem; }
  .pt80 { padding-top: 3.125rem; }
  .pb40, .pb50 { padding-bottom: 1.875rem; }
  .pb60, .pb70 { padding-bottom: 2.5rem; }
  .pb80 { padding-bottom: 3.125rem; }
}

.alignleft { float: left; width: 40%; margin: 0 1.875rem 1.25rem 0; }
.alignright { float: right; width: 40%; margin: 0 0 1.25rem 1.875rem; }
.alignright2 { float: right; width: 30%; margin: 0 0 0.625rem 1.25rem; }
.aligncenter { clear: both; display: block; width: 100%; max-width: 45rem; margin: 0 auto 1.25rem; }

@media screen and (max-width: 896px) {
  .alignright, .alignleft { width: 100%; float: none; margin: 0 auto 1.25rem; }
  .alignright2 { width: 35%; float: right; margin: 0 0 0.625rem 1.25rem; }
}

.highlight a:hover * { opacity: 0.75; }
.cf::after { content: ""; display: block; clear: both; }
.clear { clear: both; }

/* ==========================================================================
   4. Form Styles
   ========================================================================== */
#mailform dl { font-size: var(--font-size-16); margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; }
#mailform dl dt, #mailform dl dd { border-bottom: 1px solid var(--color-border, #cccccc); padding: 1.25rem 0; }
#mailform dl dt { width: 100%; max-width: 18.75rem; position: relative; padding-bottom: 0.625rem; }
#mailform dl dd { width: calc(100% - 18.75rem); text-align: left; padding-left: 1.25rem; }
#mailform .w120 { width: 100%; max-width: 7.5rem; }

#mailform .submitBtn { display: flex; flex-wrap: wrap; justify-content: center; }
#mailform .submitBtn .btn200 { max-width: 12.5rem; margin: 0 0.9375rem 0.625rem; width: calc(100% - 1.875rem); }
#mailform .submit, #mailform .back { font-size: var(--font-size-18); font-weight: var(--font-weight-700); background: var(--color-primary, #9F1333); display: block; color: #ffffff; padding: 0.75rem 0; width: 100%; border-radius: var(--radius-sm, 0.3125rem); }
#mailform .back { background: #999999; }
#mailform .form-radio span.wpcf7-list-item { margin-right: 0.625rem; }
#mailform .form-radio { padding-top: 0.625rem; }

.must { display: inline-block; height: 1.625rem; background-color: var(--color-accent, #cc0000); border: 2px solid var(--color-accent, #cc0000); padding: 0 0.3125rem; font-size: var(--font-size-12); color: #ffffff; float: right; margin: 0 0.3125rem; border-radius: var(--radius-xs, 0.25rem); }

button, option, select, textarea, input[type="button"], input[type="submit"], input[type="number"], input[type="email"], input[type="tel"], input[type="text"], input[type="select"] { appearance: none; border-radius: 0; border: none; outline: 0; margin: 0; }

textarea, input[type="number"], input[type="text"], input[type="tel"], input[type="email"], input[type="date"] { width: 100%; padding: 0.625rem 0.9375rem; font-size: var(--font-size-16); border: 1px solid var(--color-border, #cccccc); background-color: #ffffff; border-radius: var(--radius-sm, 0.3125rem); }
textarea { height: 7.5rem; }
textarea:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="text"]:focus { border-color: var(--color-link, #222222); }

::placeholder { color: #cccccc; font-size: var(--font-size-12); }

.formCheckbox { position: relative; }
.formCheckbox label { cursor: pointer; padding-left: 1.875rem; position: relative; margin-right: 1.25rem; }
.formCheckbox input[type="checkbox"] { display: none; }
.formCheckbox label::before { content: ""; display: block; position: absolute; top: 0.0625rem; left: 0; width: 1.25rem; height: 1.25rem; border: 1px solid #999999; border-radius: var(--radius-xs, 0.25rem); }
.formCheckbox input[type="checkbox"]:checked + span { color: var(--color-accent, #cc0000); }
.formCheckbox input[type="checkbox"]:checked + span::after { content: ""; display: block; position: absolute; top: -0.125rem; left: 0.3125rem; width: 0.6875rem; height: 1.25rem; transform: rotate(40deg); border-bottom: 3px solid var(--color-accent, #cc0000); border-right: 3px solid var(--color-accent, #cc0000); }

.formSelect { display: block; position: relative; width: 100%; overflow: hidden; border: 1px solid #999999; border-radius: var(--radius-sm, 0.3125rem); background-color: #ffffff; }
.formSelect select { width: 100%; padding: 0.625rem 1.5625rem 0.625rem 0.9375rem; font-size: var(--font-size-14); font-weight: var(--font-weight-700); color: var(--color-link, #222222); background: url("../img/cmn/select_arrow.svg") no-repeat right 0.625rem center; }

.formRadio li { margin: 0 1.25rem 0.3125rem 0; }
.formRadio label { cursor: pointer; }
.formRadio input[type="radio"] { display: none; }

@media screen and (max-width: 896px) {
  #mailform dl dt, #mailform dl dd { width: 100%; max-width: none; }
  #mailform dl dt { margin-bottom: 0; padding-bottom: 0.625rem; border-bottom: none; }
  #mailform dl dd { padding: 0.625rem 0 1.25rem; }
  #mailform .form-radio { padding-top: 0; }
}