@charset "UTF-8";

main { background: var(--kc-p50); }

.monochrome main { background: #333; }

/* --------------------------------------------------
  パンくず
-------------------------------------------------- */

#path { /*padding: 30px 20px;*/ background: #fff; color: #333; font-size: 1.4rem; font-weight: 700; }
#path .inner { margin: 0 auto; padding: 30px 20px 0; width: 1240px; }
#path a { color: #333; }
#path strong {}

@media screen and (max-width: 767px) {
  #path .inner { width: 100%; }
}

.monochrome #path { background: #000; color: #fff; }
.monochrome #path a { color: #fff; }

/* --------------------------------------------------
  タイトル
-------------------------------------------------- */

#title { margin-bottom: 40px; padding: 0 20px; height: 220px; background: #fff; border-radius: 0 0 150px 0; font-weight: 700; display: flex; flex-direction: column; justify-content: center; }
#title .inner { margin: 0 auto; width: 1200px; }
#title h1 { margin-bottom: 20px; color: var(--kc-p500); font-size: 4.6rem; letter-spacing: .1em; }

@media screen and (max-width: 767px) {
  #title { height: 120px; border-radius: 0 0 110px 0; }
  #title .inner { width: 100%; }
  #title h1 { margin-bottom: 15px; font-size: 2.8rem; }
}

.monochrome #title { background: #000; }

/* --------------------------------------------------
  コンテンツ
-------------------------------------------------- */

#contents { margin: 0 auto; padding: 0 20px 60px; width: 1240px; } 
#page > section { margin-bottom: 40px; padding: 140px 80px 80px; background: #fff; border-radius: 8px; }
#page h2 { margin-bottom: 20px; margin-top:-40px; font-size: 4rem; }
#page h3 { margin: 40px 0 20px; padding: 5px 10px; background: #f2f2f2; font-size: 2.4rem; }
#page h4 { margin: 20px 0 10px; padding: 0 13px; font-size: 2.0rem; position: relative;}
#page h4:before { content: ''; width: 5px; height: 30px; background: #FF6414; border-radius: 4px; display: block; position: absolute; top: 0; left: 0; }
#page p { margin: 20px 0; }
#page ul, #page ol { margin: 20px 0 20px 40px; }
#page table { margin: 20px 0; width: 100%; border-collapse: collapse; }
#page th, #page td { padding: 10px 15px; border: solid 1px #ccc; vertical-align: top; }
#page th { background: #fdc; }

@media screen and (max-width: 767px) {
  #contents { padding: 0 10px 50px; width: 100%; }
  #page > section { padding: 20px 15px; }
  #page h2 { font-size: 2.4rem;margin-top:0; }
  #page h3 { font-size: 2rem; }
  #page h4 { font-size: 1.8rem; }
}

.monochrome #page > section { background: #000; color: #fff; }
.monochrome #page h3 { background: #333; color: #fff; }
.monochrome #page th { background: #333; }
.monochrome #page a { color: yellow; }

/* --------------------------------------------------
  写真
-------------------------------------------------- */

#page .photo {}
#page .photo ul { margin: 0; list-style: none; display: flex; }
#page .photo li { margin-right: 20px; }
#page .photo li:last-child { margin-right: 0; }
#page .photo figure img { margin-bottom: 10px; }

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
  添付ファイル
-------------------------------------------------- */

#page .file {}
#page .file ul { margin: 0; padding: 20px 20px 20px 40px; border: solid 1px #ccc; }
#page .file li {}
#page .file a { font-weight: 700; }

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
  ボタン
-------------------------------------------------- */

#page .button { display: flex; justify-content: center; }
#page .button a, #page .button button { padding: 0 40px; min-width: 280px; height: 50px; background: #144696; border-radius: 5px; color: #fff; font-size: 100%; font-weight: 700; letter-spacing: .1em; display: flex; align-items: center; justify-content: center; position: relative; }
#page .button a::after, #page .button button::after { content: ''; width: 12px; height: 15px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
#page .button .gray { margin-right: 20px; background: #e6e6e6; color: #111; }
#page .button .gray::after { background: #111; }

@media screen and (max-width: 767px) {
}



/* --------------------------------------------------
  フォーム
-------------------------------------------------- */

#page form {}
#page form dl { margin: 40px 0; }
#page form dt { margin-bottom: 10px; width: 100%; font-size: 1.8rem; font-weight: 700; }
#page form dd { margin-bottom: 30px; width: 100%; }
#page form dd ul { margin: 0; list-style: none; }
#page form dd li { margin-bottom: 5px; display: flex; align-items: center; }
#page form dd li:lasts-child { margin-bottom: 0; }
#page form dd li input[type="checkbox"], #page form dd li input[type="radio"] { margin-right: 10px; flex-shrink: 0; }
#page form dd label { display: flex; align-items: center; }
#page form input[type="text"], #page form input[type="password"], #page form textarea { padding: 10px; width: 100%; font-family: inherit; font-size: 100%; border: solid 1px #ccc; }
#page form textarea { width: 100%; height: 10em; font-family: inherit; display: block; }
#page form small { margin-top: 10px; display: block; }
#page form .required { margin-left: 10px; padding: 1px 4px; background: #ec0000; color: #fff; font-size: 1.4rem; font-weight: normal; display: inline-block; }
#page form .w10 { width: 10% !important; }
#page form .w20 { width: 20% !important; }
#page form .w30 { width: 30% !important; }
#page form .w40 { width: 40% !important; }
#page form .w50 { width: 50% !important; }
#page form .w60 { width: 60% !important; }
#page form .w70 { width: 70% !important; }
#page form .w80 { width: 80% !important; }
#page form .w90 { width: 90% !important; }
#page form .w100 { width: 100% !important; }

#page form input.error, #page form textarea.error { margin-bottom: 10px; border: solid 1px #ec0000; }
#page form label.error { color: #ec0000; font-weight: bold; }
#page form input.valid, #page form textarea.valid { border: solid 1px #259d63; }

@media screen and (max-width: 767px) {
}

/* --------------------------------------------------
  ページング
-------------------------------------------------- */

.pagination { margin: 40px 0 0 !important; list-style: none; display: flex; align-items: center; justify-content: center; gap: 7px; }
.pagination li { width: 35px; height: 35px; background: #fff; display: flex; align-items: center; justify-content: center; border: solid 1px #ccc; border-radius: 3px; font-size: 1.4rem; font-weight: bold; transition: all .3s; }
.pagination li a { width: 100px; height: 100%; color: #666; display: flex; align-items: center; justify-content: center; }
.pagination li.active { color: #ff6414; }

@media screen and (max-width: 767px) {
}

.monochrome #page .pagination li a { color: #111; }
.monochrome #page .pagination li.disabled span { color: #666; }
.monochrome #page .pagination li.active span { color: #ff6414; }