時間があまりとれなかったので本日は少なめです…が、習慣化したいので投稿はしていきたいと思います。

学習内容

昨日から引き続き。

CSS

枠線を消す

div {
  border: none;
}

デフォルトで入っている枠線を消すことが出来る。

任意部分に枠線を引く

div {
  border-bottom: 1px solid #d1d1d1;
}

上記の様に記入した場合領域の下部に1pxのグレーの実線が入る。例によりtop、right、leftにそれぞれ置き換える事で引かれる場所の指定が可能。

文字サイズ調整

div {
  font-size: 1.2em;
}

上記の場合だと元々設定された値の1.2倍の大きさになる。

角を丸める

button {
  border-radius: 5px;
}

この様にするとボタンの角が5ピクセル分丸くなる。

所感

本日は不完全燃焼…明日の休みに一気に進めていきたいところ。

やりたいこと

・ページ全体を中央に配置する。
幅いっぱいのコンテンツを最大幅960pxに制限してそれ以上横に広がらないようにする。

（ページ全体の幅を固定せずに最大幅だけを設定する手法は、webサイトをモバイル末端の小さい画面にも
対応させるための重要なテクニック）

1.＜div class="wrapper"＞の最大幅を設定する。

body{
  margin:0 0 0 0;
}
.wrapper{
  margin:0 auto 0 auto;
  max-width: 960px;
}

解説

　ページの最大幅を設定して横に長くなりすぎないようにしつつ、ウィンドウが最大幅以下であれば、それに合わせて縮小するように作るのが一般的

ブロックボックスで表示されているコンテンツはウィンドウ幅に合わせて伸びたり縮んだりする。。ウィンドウに合わせて全体の幅が伸縮するのはそのため。

.wrapper{
margin:0 auto 0 auto;
max-width: 960px;
}
と設定することにより、右左のマージン値を「auto」にする。
こうしておくとマージンの大きさが自動で調節され、ウィンドウ幅960px以上の時はページが常に中央に配置される

どうも7noteです。文字を行で省略して最後の文字を「…」にする方法。

IE非対応ですが、CSSだけで文字省略する方法が神がかり的に便利だったので使い方をまとめます。
YouTubeでもこの方法を使って動画タイトルを省略しているようです。

見本

ソース

style.css

.text-ellipsis {
  display: -webkit-box;          /* 魔法の呪文 */
  -webkit-box-orient: vertical;  /* 魔法の呪文 */
  -webkit-line-clamp: 2;         /* 表示行数を指定。0以上の整数。 */
  overflow: hidden;              /* はみ出た部分を非表示 */
}

たったこの4行だけで、文章が長くなってもスッキリ見せることができます。
表示させる行数が指定できるのはとても便利ですね。

レスポンシブ等で無効化にする時は以下のようにすることで打ち消しが可能です。

/* スマホだけ打ち消したい時は以下のように指定 */
@media screen and (max-width:768px) {
  .text-ellipsis {
    display: block;
    overflow: visible;
  }
}

注意点

• CSSで消しているので、ソース上ではすべての文書が記載されている。（ブラウザでソースを表示すると分かる）
• :hover時の下線（text-decorarion: underline;）等は効かない。透明度（opacity）も効かない。
• 「…」以外の記号や文字にしたり、「…」の文字色や大きさなどの装飾ができない。
• box-orientは非推奨のプロパティのため、のちのち動作しない可能性がある。

まとめ

phpだとUTF-8でバイト数が3になってしまったり、文字数で制限してもそもそもフォントによって文字幅が違うから綺麗に文末で省略（…）させるのが難しかったのですが、
これならCSSだけで簡単に装飾できるため、文字省略の決定版といっても過言ではない。

IEが非対応だが、phpでもある程度の省略をかましながら、両方使うことでそこそこ綺麗に見せることは可能だと思います。

参考：https://www.white-space.work/text-ellipsis-php-and-css/

1行だけならIEにも対応可能な書き方

style.css

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

contact.js

window.addEventListener('DOMContentLoaded', () => {
    // 「送信」ボタンの要素を取得
    const submit = document.querySelector('#contact-submit');

    // エラーメッセージと赤枠の削除
    function reset(input_infomation, error_message){
        const input_info = document.querySelector(input_infomation);
        const err_message = document.querySelector(error_message);
        err_message.textContent ='';
        input_info.classList.remove('input-invalid');
    };

    // 「お名前」入力欄の空欄チェック関数
    function invalitName(input_target, error_target, error_message){

        const name = document.querySelector(input_target);
        const errMsgName = document.querySelector(error_target);

        if(!name.value){
            errMsgName.classList.add('form-invalid');
            errMsgName.textContent = error_message;
            name.focus();
            name.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「ふりがな」入力欄の空欄チェック関数
    function invalitHurigana(input_target, error_target, error_message){

        const hurigana = document.querySelector(input_target);
        const errMsgHurigana = document.querySelector(error_target);

        if(!hurigana.value){
            errMsgHurigana.classList.add('form-invalid');
            errMsgHurigana.textContent = error_message;
            hurigana.focus();
            hurigana.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;

    };

    // 「郵便番号」入力欄の空欄チェック関数
    function invalitPostal(input_target, error_target, error_message){

        const postal = document.querySelector(input_target);
        const errMsgPostal = document.querySelector(error_target);

        if(!postal.value){
            errMsgPostal.classList.add('form-invalid');
            errMsgPostal.textContent = error_message;
            postal.focus();
            postal.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;

    };

    // 「住所」入力欄の空欄チェック関数
    function invalitAddress(input_target, error_target, error_message){

        const address = document.querySelector(input_target);
        const errMsgAddress = document.querySelector(error_target);

        if(!address.value){
            errMsgAddress.classList.add('form-invalid');
            errMsgAddress.textContent = error_message;
            address.focus();
            address.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「電話番号」入力欄の空欄チェック関数
    function invalitTel(input_target, error_target, error_message){

        const tel = document.querySelector(input_target);
        const errMsgTel = document.querySelector(error_target);

        if(!tel.value){
            errMsgTel.classList.add('form-invalid');
            errMsgTel.textContent = error_message;
            tel.focus();
            tel.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「メールアドレス」入力欄の空欄チェック関数    
    function invalitEmail(input_target, error_target, error_message){

        const email = document.querySelector(input_target);
        const errMsgEmail = document.querySelector(error_target);

        if(!email.value){
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = error_message;
            email.focus();
            email.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「会社名」入力欄の空欄チェック関数
    function invalitCompany(input_target, error_target, error_message){

        const company = document.querySelector(input_target);
        const errMsgCompany = document.querySelector(error_target);

        if(!company.value){
            errMsgCompany.classList.add('form-invalid');
            errMsgCompany.textContent = error_message;
            company.focus();
            company.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「お問い合わせ内容」入力欄の空欄チェック関数
    function invalitContent(input_target, error_target, error_message){

        const content = document.querySelector(input_target);
        const errMsgContent = document.querySelector(error_target);

        if(!content.value){
            errMsgContent.classList.add('form-invalid');
            errMsgContent.textContent = error_message;
            content.focus();
            content.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };


    // 「送信」ボタンの要素にクリックイベントを設定する
    submit.addEventListener('click', (e) => {
        // デフォルトアクションをキャンセル
        e.preventDefault();

        reset('#name-js', '#err-msg-name');
        reset('#hurigana-js', '#err-msg-hurigana');
        reset('#postal-js', '#err-msg-postal');
        reset('#address-js', '#err-msg-address');
        reset('#tel-js', '#err-msg-tel');
        reset('#email-js', '#err-msg-email');
        reset('#company-js', '#err-msg-company');
        reset('#content-js', '#err-msg-content');

        const focus = () => document.querySelector('#name-js').focus();

        // 「お名前」入力欄の空欄チェック
        if(invalitName('#name-js', '#err-msg-name', 'お名前が入力されていません')===false){
            return;
        };
        // 「ふりがな」入力欄の空欄チェック
        if(invalitHurigana('#hurigana-js', '#err-msg-hurigana', '入力必須です')===false){
            return;
        };

        // ひらがなチェック
        const hurigana = document.querySelector("#hurigana-js");
        const errMsgHurigana = document.querySelector("#err-msg-hurigana");
        const huriganaCheck = /[^ぁ-んー 　]/u; 
        if(hurigana.value.match(huriganaCheck)){
            errMsgHurigana.classList.add('form-invalid');
            errMsgHurigana.textContent = 'ひらがなで入力してください';
            hurigana.focus();
            hurigana.classList.add('input-invalid');
            return;
        }else{
            errMsgHurigana.textContent ='';
            hurigana.classList.remove('input-invalid');
            hurigana.blur();
        };

        // 「郵便番号」入力欄の空欄チェック
        if(invalitPostal('#postal-js', '#err-msg-postal', '入力必須です')===false){
            return;
        };

        // 郵便番号形式チェック
        const postal = document.querySelector("#postal-js");
        const errMsgPostal = document.querySelector("#err-msg-postal");
        const postalCheck = /^\d{7}$/; 
        if(postal.value.match(postalCheck)){
            errMsgPostal.textContent ='';
            postal.classList.remove('input-invalid');
            postal.blur();
        }else{
            errMsgPostal.classList.add('form-invalid');
            errMsgPostal.textContent = '郵便番号は数字７桁で入力してください';
            postal.focus();
            postal.classList.add('input-invalid');
            return;
        };

        // 「住所」入力欄の空欄チェック
        if(invalitAddress('#address-js', '#err-msg-address', '入力必須です')===false){
            return;
        };
        // 「電話番号」入力欄の空欄チェック
        if(invalitTel('#tel-js', '#err-msg-tel', '入力必須です')===false){
            return;
        };

        //電話番号形式チェック
        const tel = document.querySelector("#tel-js");
        const errMsgTel = document.querySelector("#err-msg-tel");
        const telCheck = /0\d{1,4}\d{1,4}\d{4}/; 
        if(tel.value.match(telCheck)){
            errMsgTel.textContent ='';
            tel.classList.remove('input-invalid');
            tel.blur();
        }else{
            errMsgTel.classList.add('form-invalid');
            errMsgTel.textContent = '電話番号は数字で入力してください';
            tel.focus();
            tel.classList.add('input-invalid');
            return;
        };

        // 「メールアドレス」入力欄の空欄チェック
        if(invalitEmail('#email-js', '#err-msg-email', '入力必須です')===false){
            return;
        };

        const email = document.querySelector("#email-js");
        const errMsgEmail = document.querySelector("#err-msg-email");
        // "@"があるかのチェック
        if(email.value.match(/@/)){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        } else {
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }

        // Email形式チェック
        const emailSplit = email.value.split(/(@)/);
        const emailUser = emailSplit[0];
        const emailatto = emailSplit[1];
        const emailDomain = emailSplit[2];
        console.log(emailSplit);
        const emailUserCheck = /^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*/;
        const emailDomainCheck = /([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
        // const emailCheck = /^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i; 
        if(emailUser.match(emailUserCheck)){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        }else{
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }
        if(emailDomain.match(emailDomainCheck)){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        }else{
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }

        // Email文字数チェック
        const allLength = email.value.length;
        const userNameLength = emailUser.length;
        const domainNameLength = emailDomain.length;
        console.log(allLength);
        console.log(userNameLength);
        console.log(domainNameLength);
        if(allLength>=1 && allLength<=256 && userNameLength>=1 && userNameLength<=64 && domainNameLength>=1 && domainNameLength<=256){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        } else {
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください(文字数が間違っています)';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }

        // 「会社名」入力欄の空欄チェック
        if(invalitCompany('#company-js', '#err-msg-company', '入力必須です')===false){
            return;
        };
        // 「お問い合わせ内容」入力欄の空欄チェック
        if(invalitContent('#content-js', '#err-msg-content', '入力必須です')===false){
            return;
        };

        document.customerinfo.submit();

    }, false);  
}, false);

contact.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>お問い合わせ</title>
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="./css/contact.css">
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
</head>
<body>
<?php 
    require "header.php";
?>
<main>


  <section class="container container-ornament" id="contact">
    <h2 class="container-title"><span>お問い合わせ</span></h2>
    <div class="container-body">
        <div class="container-required">
        <p class="Required-title"><span class="Required">※</span>は入力必須項目になります。</p>
        </div>

      <form action="contact_db_connect.php" class="form form-m h-adr" method="post" name="customerinfo">
      <!-- <form action="" class="form form-m h-adr" method="post" name="customerinfo"> -->
          <table>

              <tr>
                  <th class="th"><span class="Required">※</span>お名前</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-name"><?php if(!empty($err_msg['name'])) echo $err_msg['name']; ?></span>
                        <input class="input input-l" id="name-js" name="name" type="text" placeholder="例）神戸　太郎" value="<?php if(!empty($_POST['name'])) echo $_POST['name']; ?>" >
                    </td>
              </tr>

              <tr>
                  <th class="th"><span class="Required">※</span>ふりがな</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-hurigana"><?php if(!empty($err_msg['kana'])) echo $err_msg['kana']; ?></span>
                        <input class="input input-l" id="hurigana-js" name="kana" type="text" placeholder="例）こうべ　たろう" value="<?php if(!empty($_POST['kana'])) echo $_POST['kana']; ?>" >
                    </td>
              </tr>

                <span class="p-country-name" style="display:none;">Japan</span>

              <tr>
                  <th class="th"><span class="Required">※</span>郵便番号</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-postal"><?php if(!empty($err_msg['zip'])) echo $err_msg['zip']; ?></span>
                        <input type="text" class="input input-l p-postal-code" id="postal-js" name="zip" size="8" maxlength="8" placeholder="ハイフン無し" value="<?php if(!empty($_POST['zip'])) echo $_POST['zip']; ?>" >
                    </td>
              </tr>

              <tr>
                  <th class="th"><span class="Required">※</span>住所</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-address"><?php if(!empty($err_msg['addr'])) echo $err_msg['addr']; ?></span>
                        <input type="text" class="input input-l p-region p-locality p-street-address p-extended-address" id="address-js" name="addr" placeholder="住所" value="<?php if(!empty($_POST['addr'])) echo $_POST['addr']; ?>" >
                    </td>
              </tr>

              <tr>
                  <th class="th"><span class="Required">※</span>電話番号</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-tel"><?php if(!empty($err_msg['tel'])) echo $err_msg['tel']; ?></span>
                        <input class="input input-l" id="tel-js" name="tel" type="tel" placeholder="例）09012345678 半角 ハイフンなし" maxlength="13" value="<?php if(!empty($_POST['tel'])) echo $_POST['tel']; ?>" >
                    </td>
              </tr>    

              <tr>
                  <th class="th sp-br"><span class="Required">※</span>メール<br>アドレス</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-email"><?php if(!empty($err_msg['email'])) echo $err_msg['email']; ?></span>
                        <input class="input input-l" id="email-js" name="email" type="email" placeholder="例）example@.com" value="<?php if(!empty($_POST['email'])) echo $_POST['email']; ?>" >
                    </td>
              </tr>    

              <tr>
                  <th class="th"><span class="Required">※</span>会社名</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-company"><?php if(!empty($err_msg['company'])) echo $err_msg['company']; ?></span>
                        <input type="text" class="input input-l" id="company-js" name="company" placeholder="例）〇〇〇〇株式会社" value="<?php if(!empty($_POST['company'])) echo $_POST['company']; ?>"　>
                    </td>
              </tr>
                            <tr>
                  <th class="th">部署名</th>
                    <td class="td">
                        <input type="text" class="input input-l" name="department" placeholder=""  value="<?php if(!empty($_POST['company'])) echo $_POST['company']; ?>"　>
                    </td>
              </tr>

              <tr>
                  <th class="th"><span class="Required">※</span>お問い合わせ内容</th>
                    <td class="td">
                        <span class="err_msg" id="err-msg-content"><?php if(!empty($err_msg['text'])) echo $err_msg['text']; ?></span>
                        <textarea class="input input-l input-textarea mb-xxl" id="content-js" name="text" placeholder="お問い合わせ内容" value="<?php if(!empty($_POST['text'])) echo $_POST['name']; ?>"　></textarea>
                    </td>
              </tr>     

          </table>

        <!-- <button type="submit" class="btn btn-corp btn-l" id="contact-submit">送信</button> -->
        <button class="btn btn-corp btn-l" id="contact-submit">送信</button>
      </form>


    </div>
  </section>
</main>

<footer class="footer">
</footer>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="./js/app.js"></script>
<script src="./js/contact.js"></script>
</body>

</html>

contact.css

@charset "UTF-8";
html, body {
  width: 100%;
  color: #444444;
  font-size: 16px;
  line-height: 1.6;
/*  font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  text-size-adjust: 100%;
  letter-spacing: 0.1em; 
  margin: 0 auto; }

p, a {
  -webkit-font-smoothing: antialiased; }

a {
  color: #FFFFFF;
  text-decoration: none;
  transition: .3s; }

a:hover {
  color: #000000;
  transition: .3s; }

img {
  width: 100%;
  vertical-align: bottom; }

.header {
  box-sizing: border-box;
  background: #808080;
  width: 100%;
  height: 80px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  position: fixed;
  transition: .3s;
  z-index: 2; }
  .header.float-active {
    transition: .3s;
    background: #808080; }
  @media screen and (max-width: 414px) {
    .header {
      height: 60px;
      padding-right: 15px;
      padding-left: 15px; } }
  .header .title {
    font-size: 30px;
    font-family: "Amatic SC", cursive;
    font-weight: bold; }
  @media screen and (max-width: 414px) {
    .header .title {
      font-size: 20px; } }
  @media screen and (max-width: 768px) {
    .header .title {
      font-size: 15px; } }
      h1 a:hover {
        color: #FFFFFF;
      }

@media screen and (max-width: 414px) {
  .nav-menu {
    display: block;
    position: absolute;
    top: 0;
    right: -100%;
    background-color:rgba(133,133,133,0.9);
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    transition: .5s; }
    .nav-menu.active {
      transition: .5s;
      transform: translateX(-100%);
      z-index: 2; } }

.menu {
  display: flex;
  align-items: center;
  font-size: 13px;
    list-style: none; }
  .menu-item {
    margin-right: 15px; }
  .menu-link {
    -webkit-font-smoothing: initial; }
  @media screen and (max-width: 414px) {
    .menu {
      display: block;
      font-size: 30px;
      padding-left: 0;}
      .menu-item {
        margin-right: initial; }
      .menu-link {
        -webkit-font-smoothing: initial;
        display: block;
        padding: 15px;
        text-align: center; } }

.menu-trigger {
  display: none;
  transition: all .4s;
  box-sizing: border-box;
  position: relative;
  width: 40px;
  height: 32px;
  z-index: 3; }
  @media screen and (max-width: 414px) {
    .menu-trigger {
      display: inline-block; } }
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 4px; }
    .menu-trigger span:nth-of-type(1) {
      top: 0; }
    .menu-trigger span:nth-of-type(2) {
      top: 14px; }
    .menu-trigger span:nth-of-type(3) {
      bottom: 0; }
  .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg); }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0; }
  .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-15px) rotate(45deg); }

.hero {
  background-image: url("../images/hero.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center; }
  .hero-title {
    font-size: 50px;
    font-family: "Amatic SC", cursive;
    color: #fff;
    text-shadow: 0 0 20px #C0C0C0, 0 0 50px rgba(0, 0, 0, 0.8); }
    @media screen and (max-width: 414px) {
      .hero-title {
        text-align: center; } }
  .hero br {
    display: none; }
    @media screen and (max-width: 414px) {
      .hero br {
        display: block; } }

.container {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  padding-bottom: 120px; }
  @media screen and (max-width: 414px) {
    .container {
      width: 100%; } }
  @media screen and (max-width: 768px) {
    .container {
      width: 100%; } }
  .container-fluid {
    width: 100%; }
  .container-title {
/*    font-family: "Amatic SC", cursive;*/
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
}
    @media screen and (max-width: 414px) {
      .container-title {
        width: 70%;
        margin-left: auto;
        margin-right: auto; } }
    @media screen and (max-width: 768px) {
      .container-title {
        width: 80%;
        margin-left: auto;
        margin-right: auto; } }
  @media screen and (max-width: 414px) {
    .container-body {
      padding-left: 15px;
      padding-right: 15px; } }

  .container-ornament .container-title span {
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1; }
  .container-ornament .container-title:before, .container-ornament .container-title:after {
    border-top: 1px solid #2e1f1a;
    content: "";
    display: block;
    position: relative;
    z-index: 0; }
  .container-ornament .container-title:before {
    top: 28px; }
  .container-ornament .container-title:after {
    top: -28px; }
  .container-ornament .container-title-lightGray span {
    background: #f8f7fc; }

.news {
  width: 70%;
  height: 60px;
  overflow-y: scroll;
  margin: 0 auto;
  border-radius: 5px;
  background: #f8f7fc;
  padding: 15px 20px; }
  .news-item {
    margin-bottom: 5px; }
  .news-date {
    color: #e37b89;
    font-weight: bold;
    font-family: "Amatic SC", cursive;
    -webkit-font-smoothing: initial;
    margin-right: 10px; }
  .news-title {
    font-size: 14px; }

.panel {
  box-sizing: border-box;
  background: #fff;
  position: relative;
  transition: .5s; }
  .panel-hover {
    display: inline-block;
    transition: .5s; }
    .panel-hover:hover {
      transform: scale(1.03);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      transition: .5s; }
  .panel-border {
    border-radius: 10px;
    border: 5px solid #CCCCCC; }
  .panel-head, .panel-foot {
    padding: 10px; }
  .panel-head {
    text-align: center;
    height: 65px;
    color: #777777; }
  .panel-active {
    border: 5px solid #e3a8b1; }
  .panel-badge {
    background: #e37b89;
    color: #fff;
    position: absolute;
    top: -20px;
    right: -20px;
    border-radius: 60px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 1.3em;
    padding: 15px 0;
    box-sizing: border-box;
    font-size: 12px;
    transform: rotate(15deg); }
    @media screen and (max-width: 414px) {
      .panel-badge {
        top: -20px;
        right: -13px; } }
  .panel-group {
    margin-right: -15px; }
    .panel-group-float {
      overflow: hidden; }
    .panel-group-flex {
      display: flex;
      flex-wrap: wrap; }
    .panel-group .panel {
      float: left;
      margin-right: 15px;
      margin-bottom: 15px;
      box-sizing: border-box; }
  .panel-staff {
    width: calc(25% - 15px); }
    @media screen and (max-width: 414px) {
      .panel-staff {
        width: calc(50% - 15px); } }
  .panel-cource {
    width: calc(33.3% - 15px); }
    @media screen and (max-width: 414px) {
      .panel-cource {
        width: 100%;
        margin: 0 auto 15px auto; } }


.service {
  box-sizing: border-box;
  background: #fff;
  position: relative;
  transition: .5s; }
  .service-border {
    border-radius: 10px;
    border: 5px solid white; }
  .service-head, .service-foot {
    padding: 10px; }
.service-foot-group{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.service-foot-group-flex{
  width: 45%;
  height: 38px;
    padding-left: 15px;
    margin-bottom: 10px;
}
.service-foot-title{
    margin-bottom: 5px;
    font-weight: bold;
    margin-bottom: 10px;
}
  .service-head {
    text-align: center;
    height: 65px;
    color: #777777; }
    .service-group-float {
      overflow: hidden; }
    .service-group-flex {
        height: 900px;
      display: flex;
      flex-direction: column; }
    .service-group .panel {
      float: left;
      margin-top: 20px;
      margin-bottom: 15px;
      box-sizing: border-box; }
  .service-cource {
    width: 80%;
      margin-top: 20px;
    margin: auto; }
    @media screen and (max-width: 414px) {
      .service-cource {
        width: 100%;
        margin: 0 auto 15px auto; } }



.form {
  width: 100%; }
  .form-m {
    width: 60%;
    margin-left: auto;
    margin-right: auto; }
    @media screen and (max-width: 414px) {
      .form-m {
        width: 100%; } }

.input {
  display: block;
  margin-bottom: 10px;
  border: 3px solid #f6f5f4;
  border-radius: 4px;
  outline: none;
  height: 40px;
  font-size: 18px;
  color: #777;
  box-sizing: border-box; }
  .input-l {
    padding: 5px 10px;
    width: 100%; }
  .input:focus {
    border: 3px solid #ABDCFF; }
  .input-textarea {
    height: 200px; }

.input-invalid {
  border: 1px solid #f50000;
}

::placeholder {
  color: #ccc; }

.btn {
  border: none;
  cursor: pointer;
  border-radius: 5px;
  box-sizing: border-box;
  transition: .3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
  .btn:hover {
    transform: translateY(-3px);
    transition: .3s;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
  .btn-corp {
    color: #fff;
    background: #90979f;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #E3E3E3, #90979f);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #E3E3E3, #90979f);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
  .btn-l {
    padding: 15px 30px;
    width: 100%;
    font-size: 18px; }

.footer {
  background: #555;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px; }
  @media screen and (max-width: 414px) {
    .footer {
      font-size: 11px; } }

.bgColor-lightGray {
  background: #F5F5F5;
  box-shadow: 0px 0px 8px 2px #ddd inset; }

.mb-xxl {
  margin-bottom: 30px; }

.ft-corp {

  font-size: 23px;
  margin: 3 auto;
  line-height: 65px;
}
.ft-center{
  font-size: 23px;
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

.td{
    width: 70%;
}
table{
    margin: 0;
}

.th{
    text-align: left;
}
.Required{
    color: red;
    font-size: 13px;
}
@media screen and (min-width: 414px) {
  th br {
    display: none;
  }
}
.Required-title{
    padding-top: 20px;
    text-align: center;
}
.err_msg{
    color: #ff4d4b;
}

See the Pen Bootstrapでアコーディオン by 熊瀬川直也 (@momonoki1990) on CodePen.

• BootstrapはCSS・JSどちらも読み込む(https://getbootstrap.jp/)
• 全体をulで囲み、親+子の1セットをliで囲む(この辺はアコーディオンとは直接関係ないのでなんでもよし)
• 子要素にclass="collapse"をつけてつぶす。また、id="target1"もつけておく
• 親要素にdata-toggle="collapse" data-target="#target1"をつける。「トグル(スイッチ)」とは一般的に切り替えスイッチのことで、ここでは「開閉を切り替えるためのスイッチ」かな。
• data-toggle="collapse"を指定することでその要素がアコーディオンを開閉するためのスイッチとなる。
• data-targetで開閉対象を指定する。子要素のidをセットする。#をつけるのを忘れず。
• data-targetにセットするidは固有にすること。子要素すべてに同じidを付与(この時点で問題だが)してそれをセットすると、一つのボタンを押すことで全てが開閉してしまう。
• 親要素に付加するaria-expand="false" aria-controls="target1"はどちらも読み上げブラウザに付加情報を与えるもので、aria-expandは開閉状態、aria-controlsは開閉対象を示す。
• 矢印はposition: absoluteで浮かせて、position: relativeをセットした親要素に対する相対位置で位置を定める。

参考

とほほのBootstrap 4入門
http://www.tohoho-web.com/bootstrap/collapse.html