@charset "utf-8";

/*================================
    GENERAL STYLES
==================================*/
/* input.html,confirm.html,finish.htmlに共通のスタイリング */

:root {
    --mainWidth: 840px;
    /* h2見出しカラー */
    --h2Blue: #014099;
    /* 本文文字色 */
    --charColor: #514949;
    --cardFontSize:12px;
    /* カードコンポーネントの余白 */
    --cardCompactPadding:20px 20px 20px 20px;
    --cardNormalPadding:18px 23px 18px 18px;

    --cardLineHeight:1.7em;
    --cardRadius:16px;
    --cardBackground: #f8fafb;
    --cardShadow: 2px 3px 5px 3px rgba(66, 62, 62, 0.20);
    --buttonShadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    --lightbulbColor: #497bdb;
}

/* PCサイズを基準にレスポンシブを適用(max-width) */
body {
    background-color: #f5f5f5;
}

p {
    /* bootstrap適用時のmarginを上書き */
    margin: 0px 0px;
}

.text-inputted {
    padding: 0.5rem 0;
}

/* 改行位置調整用 */
.d-inline-block{
    display: inline-block;
}

/* 全体のフォントを指定 */
.top-container {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ",
        Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/* 全体のコンテナサイズを指定 */
.top-container {
    max-width: var(--mainWidth);
    margin: 0 auto; /*縦列を中央寄せ*/
}

/* スマホ・タブレット時はPaddingを追加 */
@media screen and (max-width: 768px) {
    .top-container {
        padding: 5px;
    }
}

/* ヘッダー(header)*/
.header {
    width: 100%;
    margin: 10px 0px;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0px;
    padding: 5px 10px;
    border-bottom: 1px solid #eeeeee;
}
.page-header a img {
    width: 180px;
}
.page-header span {
    font-size: 12px;
    line-height: 3.2;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .page-header a img {
        width: 160px;
    }
    .page-header span {
        font-size: 10px;
        line-height: 3.2;
    }
}

/* ナビゲーション(nav class="top-nav")*/
.top-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.top-nav .navbar-text {
    font-size: 14px;
    /* bootstrapの適用を上書き */
    margin: 0px 6px 0px 0px;
}
.top-nav .navbar-text a {
    color: #428bca;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .top-nav .navbar-text {
        font-size: 12px;
    }
}

.top-header {
    width: 100%;
    border-bottom: 1px solid #014099;
    margin: 10px auto;
    color:var(--charColor);
}
.top-header h2 {
    line-height: 1.4;
    font-size: 24px;
    color: var(--h2Blue);
    padding: 15px 0px 16px;
    text-align: center;
    /* bootstrap上書き用 */
    font-weight: bold;
}
.top-header p{
    margin:0 auto;
    width:95%;
    text-align:center;
    font-size:12px;
    margin-bottom:12px;
}

/* ページ最下部の<footer> */
.footer {
    max-width: var(--mainWidth);
    height: 30px;
    background: black;
    text-align: center;
    vertical-align: middle;
}
.footer small {
    vertical-align: middle;
    height: 100%;
    width: 100%;
    color: #ffff;
}

/* --共通のcssここまで-- */

/*================================
[INPUTページ(input.htmlのCSS)] 
==================================*/

/* mainセクション(section class="main")  */
/* table要素に共通のスタイリング*/

.table {
    width: 100%;
    color: var(--charColor);
    border-spacing: 0px;
    border-collapse: collapse;
}
.table small {
    font-size: 12px;
}

.table > thead > tr > th {
    /* 各table冒頭の見出し部分 */
    font-size: 22px;
    color: var(--h2Blue);
    padding: 20px 0px;
    /* bootstrapを適用するとデフォルトで左揃えになるため上書き */
    text-align: center;
    border-bottom: none;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Form要素(form class="main-form")  */

.main-form {
    width: 100%;
}

.label-require {
    /* 「必須ラベル」のスタイリング */
    display: inline-block;
    padding: 2px 4px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background: #d9534f;
    text-align: center;
    border-radius: 4px;
}

/* form-tableのスタイリング */
.form-table tbody tr td {
    padding: 8px 8px;
    border: 0.5px solid #ddd;
}

.form-table tbody tr th {
    /* th要素（各行見出し）に背景色を指定 */
    background-color: #666;
    color: #fff;
    width: 35%;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    padding: 8px 8px;
    vertical-align: middle;
    border: 0.5px solid #ddd;
}

.form-table .form-control {
    /* form-tableのinput要素(.form-control)全てに対して */
    height: 30px;
    padding: 18px 12px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    outline: none;
}

/* 代理人申請のチェックボタン(アコーディオン)関連 */
.check-accrodion {
    margin: 20px 0px 0px 0px;
    padding:20px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.check-wrapper {
    /* input要素を中央揃え */
    display: flex;
    justify-content:center;
    align-items: center;
    padding:7px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.check-wrapper input {
    display: inline-block;
    width: 18px;
    height: 18px;
    /* bootstrapを適用するとmargin-topが適用されるので初期化 */
    margin: 0px 0px 0px;
    color: var(--charColor);
    outline: none;
}
.check-accrodion p {
    padding-left: 8px;
    color: var(--charColor);
    font-size: 18px;
    font-weight: bold;
}

.instruction-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:8px;
    margin-top:50px;
    font-size:13.5px;
    color:var(--charColor);
}
.instruction-container p {
    width:85%;
    margin:0 auto;
    text-align: center;
}
.instruction-container a {
  color: var(--lightbulbColor);
  font-weight: bold;
  text-decoration: none;
}
.instruction-container .blue-arrow {
    color:var(--lightbulbColor);
    font-size:0.9em;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}


/* バーコード情報欄のスタイリング*/
/* form-tableのCSSに一部上書きする形で指定 */
.info-table {
    margin-top: 10px;
    font-size: 14px;
}

.info-table tbody tr th {
    width: 15%;
}

.info-table tbody tr td {
    /* サイズやコンテンツが異なるため別途設定 */
    padding: 8px 10px;
    line-height: 1.4;
}

/* バーコード情報欄内のform-controlに共通の指定 */
.info-table .form-control {
    height: 35px;
    width: 20%;
    margin: 10px 5px 10px 10px;
    background-color: #fff;
    color: var(--charColor);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    outline: none;
    font-size: 16px;
}

/* プラン項目の右側のdiv要素 */
.plan-container {
    padding: 10px;
}
.plan-container label {
    display: inline;
    font-size: 16px;
    font-weight: bold;
    color: #a94442;
}

/* plan-container内の汎用ラッパー */
.plan-container .basic-container {
    padding: 15px;
    margin:15px 0px 15px 0px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    list-style: none;
}

/* プラン項目の右側のdiv要素(2つ目） */
.plan-container .option {
    padding: 10px 20px;
    margin:15px 0px 12px 0px;
    border: 1px solid #dddddd;
    border-radius: 4px;
}

.plan-container .option label{
    display: inline;
    font-size: 15px;
}
/* オプション（メモ機能）の候補選択欄 */
.plan-container .option .select-control {
    height: 35px;
    margin: 10px 5px 10px 10px;
    background-color: #fff;
    color: var(--charColor);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    outline: none;
    padding-right: 1.5rem;
}

.plan-container .option .select-control option {
    background-color: #fff;
    color: var(--charColor);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    outline: none;
}

.input-heading{
    display:flex;
    align-items: center;
    gap:5px;
}
.input-heading label{
    cursor:pointer;
}
.input-heading .tooltip-info{
    /* 見た目上の水平方向の揃い方(Informationアイコン)をわずかに下げて調整 */
    transform: translateY(1px);
    /* safari*/
    -webkit-transform: translateY(1px);
}

@media only screen and (max-width: 768px) {
    .input-heading.sp-column{
        flex-direction: column;
        align-items: start;
        position: relative;
    }
    .input-heading.sp-column .tooltip{
        position: static;
    }
    .input-heading.sp-column .tooltip-card-compact{
        left: -32px;
    }
}

/* チェックボックスのサイズを拡大 */
.input-heading input[type="checkbox"]{
    width:18px;
    height: 18px;
    margin:0 2px 0 0;
    /* NOTE:チェックボックスをtransform:scale()で拡大するとSafariで正常に表示されないため注意 */
    /* 親要素であるinput-headingがFlexboxのため、flex-shrinkで縮まないようにする */
    flex-shrink: 0; /*width:18px,height:18pxを常に維持*/
}

@media screen and (max-width: 820px) {
    /* Informationアイコンの位置を右端に常に寄せ、gapを広げる */
    .input-heading {
        gap:8px;
    }
}
@media screen and (max-width: 769px) {
    /* タブレットのメディアクエリでアイコンのサイズを拡大 */
    .input-heading i.tooltip-info{
        transform: scale(1.2);
        /* safari*/
        -webkit-transform: scale(1.2);
    }
}

/* ツールチップ(ポップアップする詳細項目)関連 */
/* 全てのツールチップに関連の設定 */

.tooltip {
    display:inline-block;
    position:relative;
    cursor:pointer;
}
.tooltip-info{
    /* FontAwesomeのInformationアイコンを青色に指定 */
    color:var(--lightbulbColor);
    transition: 0.2s;
}
.tooltip:hover .tooltip-info {
    /* ホバー時にinformationアイコンを白っぽくする */
    opacity: 0.75;
}


.tooltip-card {
    /* MEMO:visibility: noneを用いてポップアップを実装すると、レスポンシブレイアウトが崩れるため注意*/
    display: none;
    position:absolute;
    font-family: "Noto Sans JP", sans-serif;
    background-color:var(--cardBackground);
    border-radius: var(--cardRadius);
    box-shadow: var(--cardShadow);
    opacity: 0; /* はじめは隠しておく */
    z-index: 50;
}

/* ポップアップされるカードのデフォルト設定
.tooltipを基準(position:absolute)として表示位置を調整  */

.tooltip-card-normal{
    /* セキュアバーコードの概要で用いるカードサイズ */
    top: 28px;
    left:-170px;
    width:375px;
    height:480px;
}
.tooltip-card-compact{
    /* 各機能の概要で用いるカードサイズ */
    top:28px;
    left:-170px;
    width:380px;
    /* height:150px; */
}

/* 必要に応じて、.tooltip-card-normalや.tooltip-card-compactの各機能別に出現位置やサイズを調整(上書き) */

.tooltip-card-normal.secure-reader-abstract{
    height: 318px;
}

.tooltip-card-compact.enquete-feature{
    /* 独自アンケート機能の項目用 */
    height:205px;
}
.tooltip-card-compact.app-memo-feature{
    /* メモ機能の項目用 */
    height: 150px;
}
.tooltip-card-compact.fast-service-memo-feature{
    /* ファスト納品のメモ機能の項目用 */
    height: 150px;
}
.tooltip-card-compact.fast-service-feature{
    /* ファスト納品サービスの項目用 */
    height: 230px;
}

/* Hoverするとカード型のツールチップがアニメーション付きで出現*/
.tooltip:hover .tooltip-card{
    display:block;
    /* fadeInを指定して透明度を変化*/
    animation: fadeIn 0.12s ease-in 0s forwards;
}
@keyframes fadeIn {
/* ツールチップのhover時Animation */
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.tooltip-card .card-lightbulb{
    /* カード内の電球マークを全て青色に */
    color:var(--lightbulbColor);
}


/* normalサイズとcompactサイズのカード内にあるContainerをそれぞれスタイリング */

/* セキュアバーコードの概要(.card-normal-container)ツールチップに固有のスタイリング */
.card-normal-container{
    display: flex;
    flex-direction: column;
    gap:15px;
    justify-content: center;
    font-size:12px;
    line-height:var(--cardLineHeight);
    padding:var(--cardNormalPadding);
}

.card-normal-container .content-container {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap:22px;
    padding-left:8px;
}

.secure-reader-abstract .card-normal-container .content-container{
    /* QRコードリーダー端末のカードは画像がないため、gapを0pxにして上書き */
    gap:0px;
}

.content-container .app-img-container{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px;
    /* 視覚的に画像の位置を均等にするため微調整 */
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
}
.content-container .app-img-container img{
    max-width:55%;
}

/* 個別機能(.card-compact-container)用のスタイリング */
.card-compact-container{
    display: flex;
    gap:10px;
    flex-direction: column;
    justify-content: center;
    font-size:12px;
    line-height:var(--cardLineHeight);
    padding:var(--cardCompactPadding)
}
.card-compact-container .feature-container{
    display:flex;
    align-items: center;
    gap:22px;
    padding-left:8px;
}
.card-compact-container .feature-container img{
    width:80px;
    height:80px;
}


/* タブレット等での閲覧時に取りうる幅でのツールチップのポップアップ位置、サイズ、内部レイアウトの設定 */
@media screen and (max-width:960px){
    .tooltip-card h3{
        /* タブレット・スマホサイズの場合にのみ<h3>のサイズを下げ、カード内で折り返さないように調整 */
        font-size:13px;
    }
     /* ポップアップされるツールチップのデフォルト設定(タブレット時) */
    .tooltip-card-normal{
        top: 22px;
        left:-265px;
        width:280px;
        height:535px;
    }
    .tooltip-card-compact{
        top:22px;
        left:-265px;
        width:280px;
        /* height:200px; */
    }

    /* 必要に応じて、.tooltip-card-normalや.tooltip-card-compactの各機能別に出現位置やサイズを調整(上書き) */

    .tooltip-card-normal.secure-reader-abstract{
        /* QRコードリーダは画像がないため高さを調整 */
        height: 395px;
    }

    .tooltip-card-compact.enquete-feature{
        /* 独自アンケート機能の項目用 */
        /* 見出しが他の項目より長いので表示位置を微修正 */
        height:295px;
    }
    .tooltip-card-compact.app-memo-feature{
        /* メモ機能の項目用 */
        height:230px;
    }
    .tooltip-card-compact.fast-service-memo-feature{
        /* ファスト納品サービスのメモ機能用 */
        height: 225px;
    }
    .tooltip-card-compact.fast-service-feature{
        /* ファスト納品サービスの項目用 */
        height: 300px;
    }

    /* アプリ概要用(.card-normal-container)内のスタイリング */
    .card-normal-container .content-container{
        padding-left:4px;
    }

    /* 個別機能(.card-compact-container)内のスタイリング */
    .card-compact-container .feature-container{
        flex-direction: column;
        flex-flow: column-reverse;
        align-items: center;
        gap:5px;
        padding-left:4px;
    }
    .card-compact-container .feature-container img{
        margin-top:10px;
        width:70px;
        height:70px;
    }

}

/* スマホ閲覧時に取りうる幅でのツールチップのポップアップ位置、サイズ、内部レイアウトの設定 */
/* メディアクエリが598pxよりも小さいのは、ツールチップ出現時の位置調整のため */
@media screen and (max-width:450px){
     /* ポップアップされるカードのデフォルト設定(スマホ時) */
    .tooltip-card-normal{
        top: 22px;
        left:-265px;
        width:280px;
        height:530px;
    }
    .tooltip-card-compact{
        top:22px;
        left:-240px;
        width:280px;
        /* height:200px; */
    }

    /* 必要に応じて、.tooltip-card-compactの各機能別に出現位置やサイズを調整(上書き) */
    /* スマホで閲覧した場合は、informationアイコンの位置に関わらず、ポップアップしたツールチップの右端が灰色のborderに重なることを優先して調整 */

    .tooltip-card-normal.secure-reader-abstract{
        /* QRコードリーダは画像がないため高さを調整 */
        height: 395px;
    }

    .tooltip-card-compact.enquete-feature{
        /* 独自アンケート機能の項目用 */
        width:280px;
        height:295px;
    }
    .tooltip-card-compact.app-memo-feature{
        /* メモ機能の項目用 */
        height:230px;
    }
    .tooltip-card-compact.fast-service-memo-feature{
        left:-220px;
        height: 228px;
    }
    .tooltip-card-compact.fast-service-feature{
        /* ファスト納品サービスの項目用 */
        height: 295px;
    }
}
/* ツールチップの設定はココまで */


.btn-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.btn-container p {
    color: var(--charColor);
    margin-top: 20px;
    padding: 10px 30px;
    text-align: center;
}

/* ボタンに共通のスタイル */
.btn-common {
    margin: 20px 15px;
    padding: 14px 20px;
    height: 60px;
    width: 400px;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    color: #fff;
    border: 1px solid transparent;
    border-color: #ccc;
    border-radius: 0;
    transition: 0.2s;
}

/*確認ボタン */
.btn-confirm {
    color: #fff;
    background-color: #970707;
}
.btn-confirm:hover {
    background-color: #e92100;
}

/* レスポンシブ */
/* 768px以下の画面で各table要素を縦に適用し、レスポンシブに対応 */
@media only screen and (max-width: 768px) {
    /* 必須ラベルの処理 */
    .label-require {
        display:inline-block;
        padding:1px 2px; 
        font-size: 12.5px;
        color: #fff;
        background: #d9534f;
        text-align: center;
    }

    /* すべてのtable要素を横並びに解除 */
    .table tr,
    .table th,
    .table td {
        display: block; /* セルを縦に */
        border: none; /* 線をリセット */
    }
    .table th {
        font-size: 16px;
    }

    .table > thead > tr > th {
        font-size: 18px;
        /* bootstrapを適用するとデフォルトで左揃えになるため上書き */
        text-align: center;
    }
    .top-header h2 {
        font-size: 18px;
    }

    .form-table tbody tr th {
        padding: 8px 5px;
        width: 100%;
        text-align: center;
    }
    .form-table .form-control {
        /* table内のinput要素(.form-control)全てに対して */
        padding: 12px 6px;
    }
    .form-table .form-input-half{
        display:flex;
        flex-direction: column;
        flex-basis:auto
    }
    .check-accrodion {
    margin: 20px 8px 0px 8px;
    }
    .check-wrapper input {
        width: 18px;
        height: 18px;
    }
    .check-accrodion p {
        padding-left: 10px;
        font-size: 14px;
        font-weight: bold;
    }

    /* バーコード情報欄のtable要素 */
    .info-table {
        font-size: 12px;
    }

    .plan-container label {
        font-size: 14px;
    }
    .plan-container .option label {
    font-size: 12px;
    }
    .btn-container p {
        font-size: 14px;
    }

    .btn-common {
        margin: 0px 0px 20px 0px;
        width: 80%;
    }
    /* 確認ボタンのサイズと余白調整 */
    .btn-common.btn-confirm{
        width: 70%;
        margin:20px 0px;
    }
}

/*================================
CONFIM画面(confirm.html)のCSS(差分)
==================================*/
/* HTML構造がほぼ同一のため,table関連のスタイリングはINPUTに当てたものがほぼそのまま適用される*/

/* 確認画面でのみ当てられるCSS */
/* section class="main-confirm" */

.main-confirm .form-table tbody tr th {
    /* 各行の見出しサイズを確認画面用に調整 */
    font-size: 15px;
    padding: 14px 8px;
}

/* プレビュー用にuser-infoとproxy-applyの入力項目を中央揃え */
.main-confirm .user-info tbody tr td {
    vertical-align: middle;
}
.main-confirm .proxy-apply tbody tr td {
    vertical-align: middle;
}

/* 概算欄 */
.approximate {
    padding: 10px 30px;
}
.approximate p {
    font-size: 15px;
    margin-bottom: 15px;
}

.approximate p:nth-child(2) {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}
.approximate span {
    color: #970707;
    font-weight: bold;
}

/* ボタンを横並び */
.btn-confirm-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}
.btn-label {
    display: block;
    color: var(--charColor);
    margin: 30px auto 20px;
    text-align: center;
}

/* 戻るボタン */
.btn-back {
    background-color: #014099;
}
.btn-back:hover {
    background-color: #0156cc;
}
/* 送信ボタン */
.btn-send {
    background-color: #970707;
}
.btn-send:hover {
    background-color: #e92100;
}

/* レスポンシブ */
@media only screen and (max-width: 768px) {
    /* thのサイズを縮小 */
    .main-confirm .form-table tbody tr th {
        font-size: 14px;
        padding: 8px 5px;
    }
    .btn-confirm-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .btn-label {
        padding: 0px 10px;
        margin-bottom: 40px;
        font-size: 15px;
    }
}

/*================================
FINISH画面(finish.html)のCSS(差分）
==================================*/
/* infoセクション(div class="info")  */

.info {
    color: var(--charColor);
    font-size: 15px;
}
.info p {
    margin: 10px 0px;
    padding: 0px 30px;
}
.info h4 {
    margin: 10px 0px;
    padding: 0px 30px;
}
.info a {
    color: #428bca;
    font-weight: bold;
    text-decoration: none;
    transition:0.2s;
}
.info a:hover{
    color:var(--h2Blue);
}

.complete-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 40px;
}

.apply-user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 30px;
    font-weight: bold;
    border: 1px solid #d6d4d4;
    border-radius: 5px;
}
.info .small-p {
    margin: 30px 0px;
    font-size: 14px;
    text-align: center;
}

.app-link-container{
    display:flex;
    justify-content: center;
    align-items: center;
    margin:10px 0px;
    gap:170px;

}
.app-link{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top:10px;
    margin-bottom:10px;
}
.app-link .qr-image{
    margin:10px auto;
    width:110px;
    height:110px;
    transition:0.2s;
}
.app-link .qr-image:hover{
    opacity:0.8;
}

.app-link .qr-image-android{
    /* Android版QR画像のコード部分が一回り小さいため、サイズをやや大きめに設定 */
    width: 120px;
    height:120px;
}
.app-link .qr-image-ios{
    /* Android版画像を一回り大きくしているため、ios版のmargin-bottomを調整して下揃え */
    margin-bottom:20px;
}

hr {
    margin: 20px 0px;
    border-top: 1px solid #cfcfcf;
}

/* 会社情報の項目をまとめるdiv */
.contact {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 20px 0px 35px 0px;
}

/* h4の社名と画像リンクをまとめるdiv */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
}
.logo-container h4 {
    margin: 0px 0px 10px 0px;
    padding: 0px;
    font-size: 18px;
}
.logo-container .bottom-logo {
    transition: 0.2s;
}
.logo-container .bottom-logo:hover {
    /* 画像にhoverした際に白っぽくアニメーション */
    opacity: 0.8;
}

/* 右側の会社情報欄 */
.contact .contact-info {
    padding: 5px 10px;
    font-size: 14px;
}

.phone::before {
    /* 疑似要素でFontAwesomeのアイコンを指定 */
    font-family: "Font Awesome 5 Free";
    content: "\f879";
    font-weight: 900;
}
.fax::before {
    /* 疑似要素でFontAwesomeのアイコンを指定 */
    font-family: "Font Awesome 5 Free";
    content: "\f1ac";
    font-weight: 900;
}

/* 電話番号等を拡大表示 */
.tel-fax {
    font-size: 21px;
    font-weight: 300;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .info {
        font-size: 10px;
    }
    .info p {
        margin: 5px 0px;
        padding: 0px 10px;
    }
    .info h4 {
        padding: 0px 10px;
    }
    .info .small-p {
        font-size: 10px;
        text-align: center;
    }
    .apply-user {
        font-size: 12px;
    }
    .app-qr-image{
        width:80px;
        height: 80px;
    }
    .app-link-container{
        display:flex;
        flex-direction: column;
        gap:0px;
    }
    .app-link .qr-image-android{
        width:110px;
        height: 110px;
    }
    .app-link .qr-image-ios{
        /* Android版画像を一回り大きくしているため、ios版のmargin-bottomを調整して下揃え */
        width:100px;
        height: 100px;
        margin-bottom:10px;
    }
    .contact {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .contact h4 {
        font-size: 12px;
    }
    .contact .contact-info {
        font-size: 12px;
    }
    .contact .tel-fax {
        font-size: 18px;
    }
}