@charset "UTF-8";

/* 基本色・サイズ */
:root {
    --main-color: #f0f8ff;                      /* コンテンツ内で使用 */
    --accent-color: #ff7f50;                    /* アクセントで使用 */
    --dark-color: #19448e;                      /* フッタ・ボタンで使用 */
    --text-bright-color: #fff;                  /* 白抜き文字で使用 */
    --gray-color: #ddd;
    --large-width: 1000px;                        /* コンテンツの幅 */
    --middle-width:800px;
}

/* 基本設定：フォントサイズ */
@media (max-width: 599px) {
    :root {
        font-size: 14px;
    }
}

@media (min-width: 600px) and (max-width:799px) {
    :root {
        font-size: 16px;
    }
}

@media (min-width: 800px) {
    :root {
        font-size: 18px;
    }
}

@font-face {
    font-family: "YuGothic M";
    src: local("Yu Gothic Medium"),
         local("Yu Gothic");
    font-weight: 500;
  }

/* 基本設定：ページ全体 */
body {
    margin: 0;
    font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
    overflow-x: hidden;                                     /* 横スクロールが消える */
}

/********************************************
# トップページ画像
# 　・固定画像の場合
# 　・スライド画像の場合は使用しない
********************************************/
/*
.conA {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 450px;
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(images/画像ファイルスマホ.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
    color: var(--text-bright-color);
    text-align: center;
}

.conA h1 {
    margin-top: 280px;
    margin-bottom: 10px;
    font-size: 8vw;
    letter-spacing: 0.3em;
    margin-left: 0.3em;
}

.conA h2 {}
.conA p {}

@media (min-width:768px) {
    .conA {
        background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(images/画像ファイル画面.jpg);
    }

    .conA h1 {
        margin-top: 550px;
        font-size: 64px;
        letter-spacing: 0.2em;
        margin-left: 0.2em;
        color: rgba(0,0,0,0.8);
        text-shadow:  4px  4px 10px rgb(255, 255, 255) ,
        -4px  4px 10px rgb(255, 255, 255) ,
         4px -4px 10px rgb(255, 255, 255) ,
        -4px -4px 10px rgb(255, 255, 255);
    }

    .conA h2 {}
    .conA p {}
}
*/

/* トップ画像：2ndページ */
.conA2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    min-height: 300px;
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(images/top-2nd.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
    color: var(--text-bright-color);
    text-align: center;
}

.conA2 h1 {
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 6vw;
    letter-spacing: 0.4em;
    margin-left: 0.4em;
}

.conA2 p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
}

@media (min-width:768px) {
    .conA2 {
        background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(images/top-2nd.jpg);
    }

    .conA2 h1 {
        margin-top: 50px;
        font-size: 48px;
        letter-spacing: 0.2em;
        margin-left: 0.2em;
        color: rgba(255,255,255,0.8);
    }
    
    .conA2 p {
        font-size: 16px;
    }
}

/* comments */
.conC .container{
    padding-top: 80px;
    padding-bottom: 20px;
}

.conC .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
}

.conC h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
}
.conC h3 {
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: left;
}
.conC h4 {
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 16px;
    text-align: left;
}

.conC p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.8;
}

.conC ol {
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.8;
}
.conC ul {
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.8;
}

.conC img {
    float: none;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.conC a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.conC dl {
    width: 100%;
    border-bottom:1px solid #ccc;
}

.conC dt {
    float:left;
    padding:10px 5px;
    font-size: 16px;
}

.conC dd {
    margin-left:200px;
    padding:10px 5px;
    font-size: 16px;
    text-align: left;
}


.conC a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conC .container {
        display: flex;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }
    .conC .text {
        flex: 1;
    }

    .conC img {
        width: 50%;
    }
}

/* NEWS (あとで整理）*/
.conB .container {
    padding-top: 80px;
    padding-bottom: 20px;
}

.conB .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conB .group {
    padding-bottom: 20px;
}

.conB h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

.conB p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.8;
}

.conB dl {
    width: 100%;
    border-bottom:1px solid #ccc;
}

.conB dt {
    float:left;
    padding:10px 5px;
    font-size: 16px;
}

.conB dd {
    margin-left:150px;
    padding:10px 5px;
    font-size: 16px;
    text-align: left;
}

.conB a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.conB a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conB .container {
        display: flex;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }

    .conB .text {
        flex: 1;
    }
}

/********************************************
# 【日付（空白）情報】形式
#    ・トップページ／新着情報、認定・認証、リリース
********************************************/
.conDate .container {
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conDate .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conDate .group {
    padding-bottom: 20px;
}

.conDate h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0;
}

.conDate p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
}

.conDate dl {
    width: 100%;
    border-bottom:1px solid #ccc;
}

.conDate dt {
    float:left;
    padding:10px 5px;
    font-size: 12px;
}

.conDate dd {
    margin-left:90px;
    padding:10px 5px;
    font-size: 12px;
    text-align: left;
}

.conDate a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.conDate a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conDate .container {
        max-width: 1000px;
        max-width: var(--large-width);
    }

    .conDate .text {
        flex: 1;
    }

    .conDate h2 {
        font-size: 20px;
        letter-spacing: 0.2em;
        margin-bottom: 50px;
    }

    .conDate p {
        font-size: 16px;
    }
    
    .conDate dt {
        font-size: 16px;
    }
    
    .conDate dd {
        margin-left:150px;
        font-size: 16px;
    }
    .conDate a {
        font-size: 16px;
    }
}

/********************************************
# 【日付（From～To）】形式
#    ・展示会情報
********************************************/
.conDateFrom2 .container {
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conDateFrom2 .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conDateFrom2 .group {
    padding-bottom: 20px;
}

.conDateFrom2 h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0;
}

.conDateFrom2 p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
}

.conDateFrom2 dl {
    width: 100%;
    border-bottom:1px solid #ccc;
}

.conDateFrom2 dt {
    float:left;
    padding:10px 5px;
    font-size: 12px;
}

.conDateFrom2 dd {
    margin-left:120px;
    padding:10px 5px;
    font-size: 12px;
    text-align: left;
}

.conDateFrom2 a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.conDateFrom2 a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conDateFrom2 .container {
        max-width: 1000px;
        max-width: var(--large-width);
    }

    .conDateFrom2 .text {
        flex: 1;
    }

    .conDateFrom2 h2 {
        font-size: 20px;
        letter-spacing: 0.2em;
        margin-bottom: 50px;
    }

    .conDateFrom2 p {
        font-size: 16px;
    }

    .conDateFrom2 dt {
        font-size: 16px;
    }
    
    .conDateFrom2 dd {
        margin-left:200px;
        font-size: 16px;
    }
    .conDateFrom2 a {
        font-size: 16px;
    }
}

/********************************************
# 【項目（空白150・90）情報】形式
#    ・トップページ／新着情報、認定・認証、リリース
# 
********************************************/
.conItem150 .container {
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conItem150 .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conItem150 .group {
    padding-bottom: 20px;
}

.conItem150 h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0;
}

.conItem150 p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
}

.conItem150 dl {
    width: 100%;
    border-bottom:1px solid #ccc;
}

.conItem150 dt {
    float:left;
    padding:10px 5px;
    font-size: 12px;
}

.conItem150 dd {
    margin-left:90px;
    padding:10px 5px;
    font-size: 12px;
    text-align: left;
}

.conItem150 a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.conItem150 a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conItem150 .container {
        max-width: 1000px;
        max-width: var(--large-width);
    }

    .conItem150 .text {
        flex: 1;
    }

    .conItem150 h2 {
        font-size: 20px;
        letter-spacing: 0.2em;
        margin-bottom: 50px;
    }

    .conItem150 p {
        font-size: 16px;
    }
    
    .conItem150 dt {
        font-size: 16px;
    }
    
    .conItem150 dd {
        margin-left:150px;
        font-size: 16px;
    }
    .conItem150 a {
        font-size: 16px;
    }
}

/********************************************
# 【項目（改行）情報】形式
# トップページ／販売製品、サービス
********************************************/
.conProd .container {
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conProd .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conProd .group {
    padding-bottom: 20px;
}

.conProd h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0;
}

.conProd h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
    font-size: 12px;
    letter-spacing: 0;
}

.conProd p {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.conProd a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.conProd a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conProd .container {
        max-width: 1000px;
        max-width: var(--large-width);
    }

    .conProd .text {
        flex: 1;
    }

    .conProd h2 {
        font-size: 20px;
        letter-spacing: 0.2em;
        margin-bottom: 50px;
    }

    .conProd h3 {
        font-size: 16px;
        letter-spacing: 0.1em;
    }

    .conProd p {
        font-size: 16px;
    }
    
    .conProd a {
        font-size: 16px;
    }
}

/********************************************
# 概要／ごあいさつ／情報セキュリティ
********************************************/
.conMsg .container{
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conMsg .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conMsg h2 {
    margin-top: 0;
    margin-bottom: 50px;
    font-size: 15px;
    letter-spacing: 0;
}

.conMsg h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 0;
    text-align: left;
}

.conMsg p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
    text-align: left;
}

@media (min-width:768px) {
    .conMsg .container {
        max-width: 1000px;
        max-width: var(--large-width);
    }

    .conMsg .text {
        flex: 1;
    }

    .conMsg h2 {
        font-size: 20px;
        letter-spacing: 0.2em;
    }

    .conMsg h3 {
        margin-top: 50px;
        font-size: 18px;
        letter-spacing: 0.1em;
    }

    .conMsg p {
        font-size: 16px;
    }
}

/********************************************
# アクセス
********************************************/
.conAccs .container{
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conAccs .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conAccs h2 {
    margin-top: 0;
    margin-bottom: 50px;
    font-size: 14px;
    letter-spacing: 0;
}

.conAccs ol {
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
    text-align: left;
}

.conAccs img {
    float: none;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

@media (min-width:768px) {
    .conAccs .container {
        max-width: 800px;
    }

    .conAccs .text {
        flex: 1;
    }

    .conAccs h2 {
        font-size: 20px;
    }

    .conAccs ol {
        font-size: 16px;
    }

    .conAccs img {
        width: 50%;
    }
}

/********************************************
# 企業理念
********************************************/
.conPhil .container{
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 20px;
}

.conPhil .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    text-align: center;
}

.conPhil h2 {
    margin-top: 0;
    margin-bottom: 50px;
    font-size: 14px;
    letter-spacing: 0;
}

.conPhil h3 {
    text-align: left;
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.conPhil p {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
    text-align: left;
}

.conPhil a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.conPhil ul {
    text-align: left;
    font-size: 12px;
}


.conPhil a:hover {
    text-decoration: underline;
}

@media (min-width:768px) {
    .conPhil .container {
        max-width: 1000px;
        padding-top: 80px;
        padding-bottom: 20px;
        }

    .conPhil .text {
        flex: 1;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    
    }

    .conPhil h2 {
        font-size: 20px;
        margin-bottom: 100px;
    }

    .conPhil h3 {
        text-align: left;
        font-size: 16px;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .conPhil p {
        font-size: 16px;
    }
    
    .conPhil a {
        font-size: 16px;
    }

    .conPhil ul {
        text-align: left;
        font-size: 16px;
    }
}

/********************************************
# サービス／トップページ
********************************************/
.conSrv00 .container{
    display: flex;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 20px;
}

.conSrv00 .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.conSrv00 h2 {
    margin-top: 0;
    margin-bottom: 50px;
    font-size: 15px;
    letter-spacing: 0;
}

.conSrv00 p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.8;
    text-align: left;
}

.conSrv00 a {
    color: #19448e;
    color: var(--dark-color);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.conProd a:hover {
    text-decoration: underline;
}


@media (min-width:768px) {
    .conSrv00 .container {
        max-width: 1000px;
        max-width: var(--large-width);
    }

    .conSrv00 .text {
        flex: 1;
    }

    .conSrv00 h2 {
        font-size: 20px;
        letter-spacing: 0.2em;
    }

    .conSrv00 p {
        font-size: 16px;
    }

    .conSrv00 a {
        font-size: 16px;
    }
}



/* List TypeA */
/*.listA h1 {text-align: center;} h1はトップ画像上にする */

.listA .container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    max-width: var(--large-width);
    margin: 30px auto;
}

.listA article {
    flex: 1 1 300px;
    display: flex;
}

.listA a {
    flex: 1;
    margin: 10px;
    display: block;
    border: solid 1px #ddd;
    border: solid 1px var(--gray-color);
    color: inherit;
    text-decoration: none;
}

.listA a:hover {
    opacity: 0.8;
}

.listA .photo {
    min-height: 150px;
    background-position: center;
    background-size: cover;
}

.listA .text {
    margin: 10px;
}

.listA h2 {
    font-size: 20px;
    text-align: center;
}

.listA h3 {
    font-size: 16px;
}

.listA p {
    font-size: 16px;
    opacity: 0.8;
}


/* List TypeB */


/* Footer */
footer {
    color: #fff;
    color: var(--text-bright-color);
    background-color: #19448e;
    background-color: var(--dark-color);
}

footer .container {
    padding: 40px 20px;
}

@media (min-width: 786px) {
    footer .container {
        display: flex;
        flex-wrap: wrap;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }

    .footA {
        flex: 0 0 50%;
    }
    .footB {
        flex: 0 0 50%;
    }

    .footC {
        flex: 0 0 100%;
    }
}


.footA {
    margin-bottom: 30px;
}

.footA h2 {
    margin-top: 0;
    margin-bottom: 10px;
/*  font-family: 'Caveat', cursive; */
    font-size: 18px;
    letter-spacing: 0em;
}

.footA p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
}

.footA a {
    color: inherit;
    text-decoration: none;
}

.footB div {
    margin-bottom: 20px;
}

.footB h3 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: solid 1px currentColor;
    font-size: 16px;
}

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

.footB a {
    display: block;
    padding: 5px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
}

.footB a:hover {
    background-color: rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .footB {
        display: flex;
    }

    .footB div {
        flex: 1;
    }

    .footB div:not(:first-child) {
        margin-left: 40px;
    }
}

.footC {
    font-size: 10.5px;
    text-align: center;
}

@media (min-width: 768px) {
    .footC {
        font-size: 14px;
    }
}


/********************************************
#
********************************************/

/* ヘッダーA　サイト名 */
header{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(255,255,255,0.55);
}

.nohero header {                        /* トップページ以外 */
    position: static;
    border-bottom: solid 1px #ddd;
    border-bottom: solid 1px var(--gray-color);
}

.headA {
    display: flex;
    line-height: 70px;
    padding-left: 20px;
    padding-right: 20px;
}

.headA img {
    padding-top: 0px;
}

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

.headB a {
    display: block;
    padding: 15px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
}

.headB a:hover {
    background-color: rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1000px;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }

    .headB ul {
        display: flex;
    }
}

@media (max-width: 767px) {
    header .container-small {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .headC {
        margin-right: 10px;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        font-size: 28px;
        opacity: 0.5;
        cursor: pointer;
    }

    .headC:hover {
        opacity: 0.3;
    }

    .headB {
        display: none;
    }
}

@media (min-width: 768px) {
    .headC {
        display: none;
    }

    .headB {
        display: block !important;
    }
}

/* コンテンツページ　記事　*/
.post .container {
    max-width: 800px;
    max-width: var(--middle-width);
    margin-left: auto;
    margin-right: auto;
    padding: 30px 10px;
}

.post h1 {
    padding-left: 0.5rem;
    font-weight: normal;
    border-left: solid 0.75rem #19448e;
    border-left: solid 0.75rem var(--dark-color);
    font-size: 1.5rem;
}

.post h2 {
    font-size: 1.2rem;
    font-weight: normal;
    text-align: center;
    color: #19448e;
    color: var(--dark-color);
    border-bottom: solid 1px #19448e;
    border-bottom: solid 1px var(--dark-color);
    margin-top: 50px;
}

.post p {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 50px;
}

.post img {
    max-width: 100%;
}

/* コンテンツページ　HISTORY */
.history  {
    background-color: #f0f8ff;
    background-color: var(--main-color);
    margin-bottom: 50px;
}

.history .text {
    padding: 20px;
}

.history h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: normal;
}

.history .photo {
    min-height: 300px;
    background-image: url(images/abt_jk1spq.jpg);
    background-position: center;
    background-size: cover;
}

.history table {
    border-collapse: collapse;
    border-top:solid 1px #ddd;
    border-top: solid 1px var(--gray-color);
}

.history th, .history td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: solid 1px #ddd;
    border-bottom: solid 1px var(--gray-color);
}

.history th {
    padding-right: 3rem;
    font-weight: normal;
    text-align: left;
    word-break: keep-all;
}
.history td {
    padding-right: 1rem;
    text-align: left;
}

@media (min-width:768px) {
    .history .container {
        display: flex;
        max-width: 800px;
        max-width: var(--middle-width);
        margin-left: auto;
        margin-right: auto;
    }

    .history .photo {
        margin-top: 20px;
        margin-right: 20px;
        max-height: 300px;
        flex: 2;
    }
    .history .text {
        flex: 3;
    }
}

/* ボタン */
.btn-flat-border {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #19448e;
    border: solid 2px #19448e;
    border-radius: 3px;
    transition: .4s;
}
  
.btn-flat-border:hover {
    background: #19448e;
    color: white;
}

/********************************************
# トップページ　スライド
********************************************/
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-slider__title{
	color: #fff;
	font-size: 24px;
	line-height: 1.5;
	font-weight: bold;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}

@media (min-width:768px) {
    .bg-slider__title{
        color: #fff;
        font-size: 48px;
        line-height: 1.5;
        font-weight: bold;
        text-align:center;
        text-shadow: 1px 1px 1px #000;
    }
}

/********************************************
# 申込フォーム
********************************************/
form#mailformpro {
    padding-top: 80px;
    padding-bottom: 80px;
}

form#mailformpro dl dt,
form#mailformpro dl dd {
    font-size: 16px;
}

form input:not([type="checkbox"]) {
    width: 100%;
}

form label {
    width: 280px;
}

/* プライバシーポリシーへの同意 */
form dl:last-of-type {
    display: flex;
    justify-content: center;
}

form#mailformpro dl:last-of-type dd {
    padding: 0;
}

form .button {
    text-align: center;    
}

@media (min-width:768px) {
    form#mailformpro {
        margin: 0 auto;
        max-width: 500px;
    }

    /* プライバシーポリシーへの同意 */
    form#mailformpro dl:last-of-type dd {
        border-top: none;
    }
}