/* img の width / height 属性は「presentational hint」として扱われ、
   詳細度が 0 なので CSS のどの指定にも負ける。
   逆に言うと、CSS が width だけを指定して height に触れていないと、
   height 属性の値がそのまま高さとして効いてしまい画像が縦に伸びる。
   属性は CLS 対策として比率だけを伝えたいので、
   幅を CSS で決めている img には height: auto を必ず添える。
   （高さを CSS で決めて width: auto にしている .carousel-thumb img は対象外） */
#navigation>div>a>img {
    width: 45px;
    height: auto;
}

html {
    scroll-behavior: smooth;
}

iframe {
    border: 0px;
}

body {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    color: #c1c3c5;
}

h1 {
    font-family: serif;
    word-break: keep-all;
}

.client-list {
    font-size: calc(0.6em + 0.6vw);
    list-style-type: none;
}

.career-list {
    font-size: calc(0.6em + 0.6vw);
    list-style-type: none;
}

.appositive-list ul li {
    list-style-type: none;
    display: block;
    float: left;
    border-top: 1px solid grey;
}

.appositive-list ul.al-2 li {
    width: 48.56%;
    margin-right: 2.88%;
}

.appositive-list ul.al-2 li:nth-child(2n) {
    margin-right: 0;
}

.company-table {
    width: 100%;
}

.company-table>tbody>tr {
    border-bottom: 1px solid grey;
    border-collapse: collapse;
}

.company-table-data, .company-table-heading {
    vertical-align: top;
    font-size: calc(1.12em + 0.5vw);
}

.company-table-data {
    width: 70%;
}

.company-table-heading {
    width: 30%;
}

/* 写真カルーセル（Slick の置き換え）。制御は assets/js/script.js */

/* 全スライドを同じマス目に重ねる。高さは最も高いスライドに揃うため、
   切り替えでセクションの高さが動かない（Slick も高さを固定していた）。 */
.carousel-main {
    display: grid;
    /* 横方向のジェスチャはブラウザに渡さず（スマホの「戻る」誤爆を防ぐ）、
       縦スクロールだけは従来どおりブラウザに任せる。スワイプ判定は script.js。 */
    touch-action: pan-y;
    cursor: grab;
}

.carousel-main:active {
    cursor: grabbing;
}

.carousel-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;  /* flex にすると text-align では中央に寄らないため */
    text-align: center;
    padding: 5px 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
}

/* 写真の縦横比はまちまちで、表示高さは 354〜616px とスライドごとに違う。
   何もしないとキャプションが画像の直下に付いてくるため、切り替えるたびに
   文字の位置が上下してしまう。余った高さを画像の「上」に寄せることで、
   画像とキャプションの塊を常に最下部へ置き、文字の位置を固定する。 */
.carousel-slide .main-image {
    margin-top: auto;
}

.carousel-slide[data-active] {
    opacity: 1;
    visibility: visible;
}

/* サムネイル帯。選択中を中央に置き、前後にはクローンが並ぶ（JS が translateX でずらす） */
.carousel-thumbs {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.carousel-viewport {
    overflow: hidden;
}

.carousel-track {
    position: relative;
    display: flex;
}

.carousel-thumb {
    flex: 0 0 auto;
    margin: 10px 5px;
    padding: 10px 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* 左右の矢印。Slick は専用フォントの「丸囲みシェブロン」だったので、
   同梱済み themefisher-font のシェブロンに枠線で円を足して再現する。 */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: none;
    color: #fff;
    opacity: .75;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* シェブロンの字形が中心からずれるぶんを補正する */
.carousel-prev .icon {
    margin-right: 2px;
}

.carousel-next .icon {
    margin-left: 2px;
}

.carousel-arrow:hover,
.carousel-arrow:focus {
    opacity: 1;
    color: #fff;
}

.carousel-prev {
    left: -40px;
}

.carousel-next {
    right: -40px;
}

/* 幅が狭いと帯の外に矢印を置けず画面からはみ出すので、内側に寄せる。
   サムネイルに重なるため、背景を敷いて視認性を確保する。 */
@media (max-width: 767px) {
    .carousel-prev {
        left: 0;
    }

    .carousel-next {
        right: 0;
    }

    .carousel-arrow {
        background-color: rgba(0, 0, 0, .45);
    }
}

.carousel-thumb img {
    display: block;
    height: 150px;
    width: auto;
    margin-bottom: 5px;
}

/* 幅が足りない場合は折り返す（Slick のドットも inline-block で折り返していた） */
.carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

.carousel-dot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0 5px;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .25;
}

.carousel-dot[data-active] {
    opacity: .75;
}

/* Slick は専用フォントの '•' を font-size:6px で描いていた。その字形は
   em いっぱいの塗り円で、直径はおよそ5px になる。同じ文字を別のフォントで
   出すと 1px 程度にしかならず消えてしまうため、円は CSS で描く。 */
.carousel-dot::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #000;
}

.main-image {
    max-width: 630px;
    max-height: 500px;
    width: 90%;
    height: auto;  /* 冒頭のコメントを参照 */
    object-fit: contain;
}

/* csr.html の figure は display:flex。以前は各 img が <picture> に包まれており、
   フレックスアイテムは picture（3等分）、img はその 70% という見え方だった。
   Image CDN 対応で picture を外し img が直接アイテムになったため、
   同じ表示になるよう 3等分の 70%（23.333%）と余白 30%（10%）を明示する。 */
.csr-image {
    width: 23.333%;
    height: auto;  /* 冒頭のコメントを参照 */
    margin-right: 10%;
}

.slide-cap {
    font-size: 2rem;
}

.map iframe {
    width: 90%;
    height: 400px;
    margin: 50px 10px 10px 10px;
}

.recruit-item {
    border: 1px solid rgba(236, 239, 241, .07);
    padding-bottom: 30px;
    margin-bottom: 15px
}

.recruit-title {
    background-color: #292f36;
    padding: 30px 0 20px
}

.recruit-title h3 {
    color: #57cbcc;
    margin: 0 0 10px;
    text-transform: uppercase
}

.recruit-title p {
    font-size: 18px;
    font-weight: 400
}

.recruit-title .value {
    color: #57cbcc;
    font-size: 30px
}

.recruit ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.recruit li {
    padding: 10px 0
}

.recruit li:last-child {
    border-bottom: 1px solid rgba(236, 239, 241, .07);
    margin-bottom: 20px
}

.recruit li:nth-child(2n) {
    background-color: #292f36
}

.top-logo {
    width: 95%;
    max-width: 512px;
    height: auto;  /* 冒頭のコメントを参照 */
}

.al-2 {
    padding-inline-start: 0px;
}

.audio-container {
    display: flex;
    justify-content: center;
    align-items: center
}

.instagram-media{
    margin: 0 auto !important;
}
/* アイコン（layouts/partials/icon.html が出力するインライン SVG）。
   もとはアイコンフォントの文字だったので、同じ大きさ・同じ位置になるよう
   1em 四方にし、ベースラインより下に出る分（1024 - 896 = 128/1024 = 0.125em）を
   vertical-align で下げている。 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: currentColor;
}