/******************************************************************************
******************************************************************************
**
** style.cssにおいて
** -- styleではコンテンツ（データ入れ）で使用する基本タグのCSS指定
** -- headerではヘッダーのCSS指定
** -- global navではグローバルナビのCSS指定
** -- contentではコンテント・メイン・サイドナビのCSS指定
** -- footerではフッターのCSS指定
** -- pagetopではページトップボタンのCSS指定
** -- homeではトップページのCSS指定
** -- pageでは汎用ページのCSS指定
**
** 注意事項
** -- CSSの命名規則はApplicatsオリジナルの命名規則を採用しています。
** -- 初期フォントサイズはreset.cssにて13pxにリセットしています。
** -- 行間は1.6にリセットしています。
**        単位は不要です。(スタイル崩れする可能性有)
** -- コンテンツ内のフォントサイズ・行間は
**        [ base ]のcontentsクラスで指定しています。
**        変更する場合はこちらを変更してください。
**
******************************************************************************
******************************************************************************/

/************************PC用*******************************/

@media screen and (min-width:769px) {

    /***********************************************************/
    .base_w {
        margin: 0 auto;
        width: 960px;
    }

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    /*----------------------------------------------------------------------------
******************************************************************************
** style
******************************************************************************
----------------------------------------------------------------------------*/
    main {
        width: 960px;
        margin: 0 auto;
    }

    #content {
        width: 700px;
        margin: 0 auto;
    }

    #content p {
        display: block;
        font-size: 15px;
        margin-bottom: 20px;
    }

    #content h1 {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .area {
        width: 700px;
        margin: 0 auto;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .area tbody th {
        border-right: none;
        background: #dcdcdc;
        width: 30%;
        position: relative;
    }

    .area tbody th:after {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(220, 220, 220, 0);
        border-left-color: #dcdcdc;
        border-width: 10px;
        margin-top: -10px;
    }

    .area tbody td {
        border-left: none;
    }

    .area tbody td {
        width: 70%;
        border-bottom: 1px solid black;
        padding-left: 15px;
    }

    .area tbody td img {
        width: auto;
    }

    .area tbody th span {
        background: #cc0000;
        font-weight: normal;
        color: #fff;
        padding: 3px 5px;
        font-size: 11px;
    }
    .area2 {
        width: 700px;
        margin: 0 auto;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .area2 tbody th {
        border-right: none;
        background: #dcdcdc;
        width: 30%;
        position: relative;
    }

    .area2 tbody th:after {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(220, 220, 220, 0);
        border-left-color: #dcdcdc;
        border-width: 10px;
        margin-top: -10px;
    }

    .area2 tbody td {
        border-left: none;
    }

    .area2 tbody td {
        width: 70%;
        border-bottom: 1px solid black;
        padding-left: 15px;
    }

    .area2 tbody td img {
        width: auto;
    }

    .area2 tbody th span {
        background: #cc0000;
        font-weight: normal;
        color: #fff;
        padding: 3px 5px;
        font-size: 11px;
    }

    #content p.btn {
        text-align: center;
        margin: 30px 0 50px;
    }

    div#content div.pray iframe {
        height: 200px;
        max-width: 700px;
        width: 100%;
        border: 1px solid black;
    }
    input[type="submit"] {
        width: 15%;
        border-radius: 7px;
        /*角丸に*/
        text-align: center;
        /*中身を中央寄せ*/
        vertical-align: middle;
        /*垂直中央寄せ*/
        background: rgb(220, 220, 220);
        overflow: hidden;
        /*はみ出た部分を隠す*/
        text-decoration: none;
        /*下線は消す*/
    }

    .hr-text {
        font-size: 20px;
        line-height: 1em;
        position: relative;
        outline: 0;
        border: 0;
        color: black;
        text-align: center;
        height: 1.5em;
    }

    .hr-text:before {
        content: '';
        background: -webkit-linear-gradient(left, transparent, #818078, transparent);
        background: linear-gradient(to right, transparent, #818078, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
    }

    .hr-text:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: black;
        padding: 0 .5em;
        line-height: 1.5em;
        color: #818078;
        background-color: white;
    }

    /*----------------------------------------------------------------------------
******************************************************************************
** ブランクページ
******************************************************************************
----------------------------------------------------------------------------*/
    html {
        margin-top: 5px!important;
    }

    #privacy {
        padding: 1em;
    }
    #privacy h1 {
        font-size: 120%;
        margin-bottom: 1em;
    }

    #privacy p {
        font-size: 100%;
        margin-bottom: 2em;
    }

    /*----------------------------------------------------------------------------
******************************************************************************
** フッター
******************************************************************************
----------------------------------------------------------------------------*/
    div.footer {
        border-top: 1px dashed #dcdcdc;
        padding: 2em;
    }

    div.footer p {
        display: block;
        text-align: center;
    }

    div.footer p small {
        font-size: 10px;
    }
    /*********************/
}

/*PC用終わり*/

/*********************/

/****************スマホ,iphone用*****************************/

@media screen and (max-width:768px) {

    /***********************************************************/
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
    html {
        width: 100%;
    }
    main {
        width: 98%!important;
        margin: 0 auto;
    }
    div#content {
        width: 98%;
        margin: 0 auto;
    }
    div#content h1 {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .area {}
    #content p {
        display: block;
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .area {
        width: 100%!important;
        font-size: 100%;
        margin-bottom: 20px;
    }

    .area tbody th {
        background: #dcdcdc;
        width: 40%;
    }

    .area tbody td {
        width: 60%;
        border-bottom: 1px solid black;
        padding-left: 15px;
    }

    .area tbody td img {
        width: auto;
    }
    .area tbody th span {
        background: #cc0000;
        font-weight: normal;
        color: #fff;
        padding: 3px 5px;
        font-size: 11px;
    }
    .area2 {
        width: 98%;
        margin: 0 auto;
        font-size: 11px;
        margin-bottom: 20px;
    }
    .area2 tbody td img {
        width: auto;
    }
    .area2 tbody th {
        border-right: none;
        background: #dcdcdc;
        width: 30%;
        position: relative;
    }
    .area2 tbody th span {
        background: #cc0000;
        font-weight: normal;
        color: #fff;
        padding: 3px 5px;
        font-size: 11px;
    }
    .area2 tbody td {
        border-left: none;
    }

    .area2 tbody td {
        width: 70%;
        border-bottom: 1px solid black;
        padding-left: 15px;
    }
    div.pray iframe {
        height: 200px;
        max-width: 760px;
        margin: 0 auto;
        width: 100%;
        border: 1px solid black;
    }
    #privacy {
        width: 100%;
    }
    /*********************/
}

/*スマホ,iphone用終わり*/

/*********************/