@charset "utf-8";
/*
Theme Name: Sapporo UI（子テーマ）
Template: liquid-lp
Description: 札幌UI就職ナビ向けの子テーマ。親テーマ LIQUID LP を更新しても、独自の画面とデザインが残るように分けたもの
Author: ryuken
Author URI: https://ryuken.co.jp
Version: 1.0.0
Text Domain: sapporo-ui-child
*/

/* ------------------------------------
Bootstrap 4 との互換（親テーマ 2 系は Bootstrap 5。独自の画面が 4 の書き方を使っている）
------------------------------------ */
/* 枠と列の左右の余白を Bootstrap 4 と同じ 15px に戻す（5 は 12px）。g-0 などで余白を指定した行には効かせない */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    --bs-gutter-x: 30px;
}
.row:not(.g-0):not(.gx-0):not(.g-1):not(.gx-1):not(.g-2):not(.gx-2):not(.g-3):not(.gx-3):not(.g-4):not(.gx-4):not(.g-5):not(.gx-5) {
    --bs-gutter-x: 30px;
}
/* Bootstrap 5 は .row の直下の要素をすべて「幅いっぱい・左右に余白」にする。4 は col-… の付いた要素だけだった。
   独自の画面には col-… の無い要素を .row に置いて横に並べている所があるので、4 と同じにする */
.row > :not([class^="col"]):not([class*=" col"]) {
    flex-shrink: 1;
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}
/* Bootstrap 4 の列は、中身が空でも高さ 1px あった */
.col, [class^="col-"], [class*=" col-"] {
    min-height: 1px;
}
/* Bootstrap 4 の列は .row の外でも左右に 15px の余白があり、position: relative だった（5 は .row の直下にだけ余白が付く）。
   余白は行の --bs-gutter-x に合わせる（g-0 の行では 0、行の外では枠の 30px の半分） */
:is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) {
    position: relative;
    padding-right: calc(var(--bs-gutter-x, 30px) * .5);
    padding-left: calc(var(--bs-gutter-x, 30px) * .5);
}
/* Bootstrap 4 の左右の余白・寄せのクラス（5 では ms-/me-/ps-/pe-、text-start/end、float-start/end に名前が変わった。
   ダウンロードの一覧（Download Manager）や独自の画面で使われている） */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
/* fieldset の見出し（legend）。Bootstrap 5 は左に回り込ませる（float）ので、下の余白が効かなくなる。4 と同じにする */
legend {
    float: none;
    width: 100%;
    max-width: 100%;
    font-size: 1.5rem;
}
legend + * {
    clear: none;
}
/* 上の「.row の直下の要素」の指定で legend の幅が auto になり、検索フォームの行が詰まるので、legend は幅いっぱいに戻す */
.row > legend:not([class^="col"]):not([class*=" col"]) {
    width: 100%;
    max-width: 100%;
}
/* 年月などの入力欄の内側の余白（Bootstrap 5 は 0 にする。4 はブラウザーの既定のまま） */
::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
    padding: revert;
}
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-block + .btn-block {
    margin-top: .5rem;
}
.font-weight-bold {
    font-weight: 700 !important;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}
.badge-pill {
    border-radius: 10rem;
}
/* 箇条書きの左の余白（Bootstrap 5 は 2rem。4 は指定なしでブラウザーの既定 40px） */
ol, ul {
    padding-left: 40px;
}
/* small の大きさ（Bootstrap 5 は 87.5%、4 は 80%） */
small, .small {
    font-size: 80%;
}
/* label の下の余白（Bootstrap 4 は .5rem、5 は 0） */
label {
    margin-bottom: .5rem;
}
/* 表（Bootstrap 4: セルの余白 .75rem・罫線はセルの上・背景は透明・文字色はそのまま） */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: currentColor;
}
.table > :not(caption) > * > * {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    border-bottom-width: 0;
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
.table-sm > :not(caption) > * > * {
    padding: .3rem;
}
.table-bordered {
    border: 1px solid #dee2e6;
}
.table-bordered > :not(caption) > * {
    border-width: 0;
}
.table-bordered > :not(caption) > * > * {
    border: 1px solid #dee2e6;
}
.table-bordered > thead > tr > th {
    border-bottom-width: 2px;
}
/* スマホのメニューボタンを押したときの枠（Bootstrap 5 で付くようになった）を出さない */
.navbar-toggler:focus {
    box-shadow: none;
}
/* カード・ボタン・バッジの余白と角の丸み（Bootstrap 4 の値） */
.card {
    --bs-card-border-radius: .25rem;
    --bs-card-inner-border-radius: calc(.25rem - 1px);
}
.card-body {
    padding: 1.25rem;
}
.card-header {
    padding: .75rem 1.25rem;
}
.btn { border-radius: .25rem; }
.btn-sm { border-radius: .2rem; }
.btn-lg { border-radius: .3rem; }
.rounded { border-radius: .25rem !important; }
.badge {
    padding: .25em .4em;
    font-size: 75%;
    border-radius: .25rem;
}
/* 表の見出し（caption）の上下の余白（Bootstrap 5 は .5rem、4 は .75rem） */
caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
}
/* チェックボックス・ラジオボタン（Bootstrap 4 の form-check。5 は独自の見た目と配置に変わった） */
.form-check {
    position: relative;
    display: block;
    min-height: 0;
    padding-left: 1.25rem;
    margin-bottom: 0;
}
.form-check-input,
.form-check .form-check-input {
    position: absolute;
    float: none;
    width: auto;
    height: auto;
    margin-top: .3rem;
    margin-left: -1.25rem;
    vertical-align: baseline;
    -webkit-appearance: auto;
    appearance: auto;
    background: none;
    border: 0;
    border-radius: 0;
    filter: none;
}
.form-check-input:checked,
.form-check-input:focus,
.form-check-input:active {
    background: none;
    border: 0;
    box-shadow: none;
    filter: none;
}
.form-check-label {
    margin-bottom: 0;
}
.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: .75rem;
}
.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: .3125rem;
    margin-left: 0;
}

/* ------------------------------------
画像ブロック
------------------------------------ */
/* 親テーマに theme.json があると、WordPress は中央寄せの画像を div で包まずに出す。
   1 系（包まれていた）と同じく、画像の下に余白を付けない */
figure.wp-block-image.aligncenter {
    margin-bottom: 0;
}
/* 左寄せ・右寄せの画像も、1 系（div で包まれていた）と同じ余白にする（WordPress の既定は 1 系 .5em 1em、theme.json があると 2em） */
:is(.is-layout-flow, .is-layout-constrained) > figure.wp-block-image.alignleft {
    margin: .5em 1em .5em 0;
}
:is(.is-layout-flow, .is-layout-constrained) > figure.wp-block-image.alignright {
    margin: .5em 0 .5em 1em;
}

/* ------------------------------------
見出し（親テーマ 2 系・Bootstrap 5 で変わった見た目を 1 系に戻す）
------------------------------------ */
/* Bootstrap 5 は画面幅で見出しの大きさを変える。4 と同じ固定の大きさにする */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
@media (max-width: 575.98px) {
    h1 { font-size: 1.6rem; }
    h2, h3 { font-size: 1.4rem; }
    h4 { font-size: 1.3rem; }
}
/* 1 系は JavaScript で見出しの中身を span で包み、その span に「上下 1rem・下に -3px」の余白を付けていた。
   子テーマでも js/compat-1x.js で同じように包む。2 系は見出し自体に余白（padding: 1rem 0）を付けるので、1 系と同じ 0 に戻す
   （本文で見出しに個別に付けた余白は、1 系と同じく span の余白に足される） */
.post_body h1, .post_body h2,
.widget h1, .widget h2 {
    position: static;
    padding: 0;
}
.post_body h1 > span, .post_body h2 > span,
.widget h1 > span, .widget h2 > span {
    display: inline-block;
    padding: 1rem 0;
    margin-bottom: -3px;
}
/* ウィジェットなどの見出し（.ttl）。1 系は余白なし */
.ttl {
    position: static;
    padding: 0;
}
/* 2 系で付いた見出しの下線は出さない（札幌UI就職ナビは下線なし） */
.post_body h1:not([class*="is-style-"])::after, .post_body h1.is-style-default::after,
.post_body h2:not([class*="is-style-"])::after, .post_body h2.is-style-default::after,
.widget h1::after, .widget h2::after, .ttl::after {
    content: none;
}

/* ------------------------------------
文字・リンク
------------------------------------ */
body {
    font-family: Avenir, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'Noto Sans Japanese', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    padding-top: 101px; /* ヘッダーの高さと一致させる */
}
a,
a:hover, a:active,
a:visited {
    color: #D10000;
}

/* ------------------------------------
ヘッダー（常に上に固定する）
------------------------------------ */
.head {
    top: 0;
    z-index: 21;
    box-shadow: 0px 3px 6px -3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 3px 6px -3px rgba(0,0,0,0.3);
    opacity: 1;
}
.head-fixed-top-custom,
.head-fixed-top-custom:hover {
    opacity: 1;
}

/* ------------------------------------
フッター（親テーマの背景・余白・リンク色の指定を打ち消す）
------------------------------------ */
footer {
    background-color: transparent;
    padding: 0;
    font-size: inherit;
}
footer a, footer a:hover, footer a:active, footer a:visited {
    color: #D10000 !important;
}

/* ------------------------------------
画面幅ごとの調整
------------------------------------ */
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.logo-pc { display: block !important; }
.logo-sp { display: none !important; }
.logo-line-sp { display: none !important; }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    body {
        padding-top: 149px; /* ヘッダーの高さと一致させる */
    }
}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    body {
        padding-top: 130px; /* ヘッダーの高さと一致させる */
    }
    .button-auto-size a {
        width: auto;
    }
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .custom-header-item {
        display: none;
    }
    .custom-header-row {
        text-align: center !important;
    }
    .logo-pc { display: none !important; }
    .logo-sp { display: block !important; }
    .logo-line-sp { display: inline !important; }
    body {
        padding-top: 50px; /* ヘッダーの高さと一致させる */
    }
    .top-contents .news .list article {
        flex-wrap: wrap;
    }
    .top-contents .news .list article .title {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ------------------------------------
札幌UI就職ナビの独自の CSS（改造版の style.css の末尾から移したもの）
------------------------------------ */
/* ナビゲーションバーの背景色を変更 */
.navbar {
    background-color: #d9d9d9;
}

/* 画像用の行のスタイル */
.header-image-row {
    margin-bottom: 20px; /* 必要に応じて調整 */
}
.header-image {
    max-width: 100%; /* 画像がコンテナの幅を超えないように設定 */
    height: auto; /* 高さを自動調整 */
    max-height: 300px; /* 最大高さを設定、必要に応じて調整 */
}
.header-image-sp {
    height: auto; /* 高さを自動調整 */
    max-height: 50px; /* 最大高さを設定、必要に応じて調整 */
    max-width: 50px; /* 最大幅を設定、必要に応じて調整 */
	padding-right:20px;
}


/* ソーシャルアイコンとボタンのスタイル */
.social-icon {
    margin-left: 10px;
    display: inline-block;
}
.social-icon img {
    width: 24px;
    height: 24px;
}

.header-image-row .btn {
    margin-left: 20px;
}

/* ナビゲーションメニューを右寄せ */
.navbar-nav {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

/* Usability Panelのスタイル */
.usability_panel {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 1000;
}

.usability_panel button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: white;
    color: black;
    border: none;
    cursor: pointer;
}

.usability_panel button:hover {
    background-color: lightgray;
}

/* インターンシップ情報ページ */

.internship-archive {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.internship-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}

.internship-item h2 {
    margin: 0;
    font-size: 24px;
}

.internship-details p {
    margin: 0 0 10px;
}

.read-more a {
    color: #0073aa;
    text-decoration: none;
}

.read-more a:hover {
    text-decoration: underline;
}

.internship-single {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.custom-fields p {
    margin: 10px 0;
}


.table-sapporo th {
  background-color: #ffc4c4;
}

.table-sapporo-job th {
	background-color: #ffc4c4;
}

.table-sapporo-student tr {
  background-color: #ffc4c4;
  width: 20%;
}

.liquid_blocks_format_underline-white{
	text-decoration:none;
	border-bottom:solid 5px white;
}

.student{
	padding-top:2px;
	padding-bottom:1px;
	color: #000000;
    background: #ffa2b3;
	border-radius:10px;
}

.adults{
	padding-top:2px;
	padding-bottom:2px;
	color: #000000;
    background: #75E687;
	border-radius:10px;
}

.detail-link{
	padding-top:2px;
	padding-bottom:2px;
	padding-left:13px;
	padding-right:8px;
	color: #000000;
    background: #FFC4C4;
	border-radius:10px;
}

.event-title{
	font-weight: bold;
	text-decoration: none;
    border-bottom: solid 5px #ffd4d4;
    padding-bottom: 0px;
	margin-bottom:10px;
}

.event-accordion{
	cursor: pointer;
	transition: 0.2s;
	height:50px;
	padding-top:14px;
	
}
.event-accordion:hover{
	cursor: pointer; /* カーソルを指マークに */
	background-color: #EFEFEF;
}

.btn-primary {
    color: #fff;
    background-color: #0071F0;
    border-color: #0071F0;
}

.news-title{
	font-weight:bold;
	text-decoration:underline;
	
}

.job-search-layout{
	border:3px solid #FF8F8F;
	padding-left:3%;
}
/* Hide the default checkbox */
.custom-checkbox input {
    display: none;
}

/* Style the custom checkbox */
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 35px; /* Space for the custom checkbox */
    cursor: pointer;
    user-select: none;
}

/* Create a custom checkmark/box */
.custom-checkbox .checkmark {
    position: absolute;
    left: 0;
    top: 0;
	margin-top:4px;
    height: 15px; /* Size of the custom checkbox */
    width: 15px; /* Size of the custom checkbox */
    background-color: white; /* Background color of the checkbox */
	border:2px solid pink;
    border-radius: 3px; /* Rounded corners for the checkbox */
}

/* Change the background color of the checkbox when checked */
.custom-checkbox input:checked + .checkmark {
    background-color: pink; /* Checked color */
}

/* Create a checkmark/indicator */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Display the checkmark/indicator when checked */
.custom-checkbox input:checked + .checkmark:after {
    display: block;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.copy-right{
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
}

.job-detailed{
	background-color: #FF8F8F; 
	border-radius: 20px; 
	width: max-content; 
	padding: 0 10px; 
	font-weight:bold; 
	display: inline-block;
	text-align:right;
	margin-right:0px;
	
}

.card{
	border:3px solid rgba(0, 0, 0,.125);
}

.event-margin{
	margin-bottom:0px;
}

.contact-required{
	background-color:#D10000;
	color:white;
	font-size:10px;
	padding:5px;
	margin-left:3px;
	border-radius:5px;
}


input[type="button"]{
	cursor:pointer;
	width:100%;
	color: #fff;
    background-color: #0071F0;
    border-color: #0071F0;
	padding:.375rem .75rem;
	margin-bottom:10px;
}

input[type="button"]:hover{
	background-color:#0b5ed7;

}

/* こだわり条件 */
.special-conditions{
	border:3px solid rgb(255, 143, 143);
	background-color:#ffeff1;
	border-radius:1px;
	padding:5px;
	margin-right: 5px;
	font-weight:bold;
}

.company-name{
	font-size:20px;
}

.fuzzy-search{
	width:21em;
	max-width:100%;	
}

/* 求人詳細 求人table */
.holiday-table-dt{
	border:none;
}

.returne-page-link{
	background-color:#FFC4C4;
	padding:0.7em;
	border-radius:10px;
}

.liquid_blocks_format_underline{
	line-height:1.3em;
}