/*
Theme Name: workbook
Description: 
Author:
Author URI: 
*/

/* ----------------------------
sanytize.css
---------------------------- */
/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
    box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
    cursor: default;
    /* 1 */
    line-height: 1.5;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    tab-size: 4;
    /* 3 */
    -webkit-tap-highlight-color: transparent
        /* 4 */
    ;
    -ms-text-size-adjust: 100%;
    /* 5 */
    -webkit-text-size-adjust: 100%;
    /* 5 */
    word-break: break-word;
    /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
    margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
    margin: 0;
}

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
    display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
    list-style: none;
    padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
    border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
    fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
    border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
    margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
    overflow: visible;
    /* 1 */
    text-transform: none;
    /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
    border: 1px solid #a0a0a0;
    /* 1 */
    padding: 0.35em 0.75em 0.625em;
    /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
    overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    white-space: normal;
    /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
    text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
    margin: 0;
    /* 1 */
    overflow: auto;
    /* 2 */
    resize: vertical;
    /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
    padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
    box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
    display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
    background-color: white;
    border: solid;
    color: black;
    display: block;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}

dialog:not([open]) {
    display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
    display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
    -ms-touch-action: manipulation;
    /* 1 */
    touch-action: manipulation;
    /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
    cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
    cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
    display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

/* ----------------------------
style.css
---------------------------- */
@charset "UTF-8";

/* CSS Document */

:root {
    --main-color: #f5ecdf;
    --background-color: #fff9f0;
    --pink-color: #fcdcf3;
    --orange-color: #fad0c6eb;
    --font-color: #333;
}

/*-------------------------------------
PCレイアウト(768px以上スクリーン)
-------------------------------------*/
/* body全体の初期スタイル調整 */
body {
    font-size: 62.5%;
    font-family: "YuGothic", "Yu Gothic UI", "Hiragino Sans", "Meiryo", "sans-serif";
    font-weight: normal;
    color: var(--font-color);
}

/* リンク文字の設定 */
a {
    text-decoration: underline;
}

a:link,
a:visited {
    color: #39f;
}

a:hover,
a:active {
    color: #f60;
}

/* ブラウザのCSSをリセット */
p {
    margin: 0 !important;
    padding: 0 !important;
}

section {
    clear: both;
    overflow: auto;
}

/*-------------------------------------
全体レイアウト/背景設定(PC)
-------------------------------------*/
/* 全体エリア(全体背景を設定するにはここ) */
.main {
    background-color: #f2f2f2;
}

/* 記事(ボディ)エリア */
.article {
    background-color: #fff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size: 1.6em;
    /* 16px */
}

/* 記事(ボディ)エリアの行間 */
.article p {
    line-height: 1.6;
}

/* カラム全体の幅を変更する */
.article,
.top_image_in {
    width: 640px;
    margin: 0 auto;
}

/*-------------------------------------
上部固定ヘッダー設定
-------------------------------------*/
/* 上部固定ヘッダー全体 */
.header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 5000;
    background: #fff;
    border-bottom: 1px solid #ccc;
    overflow: auto;
}

/* ヘッダー部分をカラム幅にする */
.header_inr {
    max-width: 950px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 20px;
}

/* ヘッダーのロゴ */
.header_logo {
    width: 20%;
    float: left;
    margin: 0;
}

/* ヘッダーの問い合わせ */
.header_mail {
    width: 25%;
    float: right;
    margin: 0.8em 0em 0em;
}

/* ヘッダーの電話ボタン */
.header_tel {
    width: 30%;
    float: right;
    margin: 0.8em 0em 0em;
}

/* ヘッダー内の画像が常に100%幅表示 */
.header_logo img,
.header_mail img,
.header_tel img {
    width: 100%;
}

/*-------------------------------------
見出しタグ設定(PC)
-------------------------------------*/
h2 {
    margin: 0.5em 0em;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

h3 {
    margin: 0.5em 0em;
    padding: 0.3em 0.6em;
    font-size: 1.6em;
    font-weight: bold;
    border-left: 8px solid #10559A;
    border-bottom: 1px dotted #10559A;
}

h4 {
    margin: 0.5em 0em;
    padding: 0.3em 0.6em;
    font-size: 1.4em;
    font-weight: bold;
    border: 1px solid #000;
}

h5 {
    margin: 0.5em 0em;
    padding: 0.1em;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

/*-------------------------------------
section設定
-------------------------------------*/
.section_01 {
    padding: 1.5em 3em;
}

.section_02 {
    background-color: #fffef0;
    padding: 1.5em 3em;
}

/*-------------------------------------
チェックリスト設定
-------------------------------------*/
ul.checklist {
    border: 1px solid #ccc;
    list-style: none;
    padding: 1em;
}

ul.checklist li {
    background-image: url("https://jyosanshimiki.com/monndaisyuu/wp-content/themes/workbook/images/icon-check03-red.png");
    background-repeat: no-repeat;
    background-size: 3.5%;
    padding-left: 1.8em;
    margin-bottom: 1em;
}

ul.checklist li:last-child {
    margin-bottom: 0em;
}

/*-------------------------------------
テーブル設定
-------------------------------------*/
table {
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin: 1em 0em;
}

th,
td {
    padding: 0.5em;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

th {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: center;
}

td {
    background-color: #fff;
    text-align: left;
}

.table_style_01 {
    text-align: left;
    vertical-align: middle;
}

/*-------------------------------------
フォーム設定
-------------------------------------*/
.mailform {
    background-color: #fff;
    margin-bottom: 1em;
    padding: 1em 0em 1.5em;
    box-shadow: 0px 0px 1px #000;
}

.input {
    padding: 0 2em;
}

.input_style {
    background-color: #fff8f0;
    width: 100%;
    height: 60px;
    margin-bottom: 0.5em;
    text-align: center;
    font-style: 1.4em;
}

input[type="image"] {
    width: 100%;
}

.caution {
    text-align: center;
    font-size: 0.8em;
    color: #f00;
}


/*-------------------------------------
メッセージエリア
-------------------------------------*/
.area_message {
    padding: 50px 0;
    background-color: var(--background-color);
}

/*-------------------------------------
特徴エリア
-------------------------------------*/
.area_features {
    padding: 50px 30px;
    background: linear-gradient(to top, var(--pink-color), var(--orange-color), var(--pink-color));
}

.area_features_inr>div {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.area_features_inr>div.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*-------------------------------------
お客様の声エリア
-------------------------------------*/
.area_voices {
    padding: 50px 30px;
    background-color: var(--background-color);
}

.area_voices_title {
    padding-bottom: 50px;
}

/*-------------------------------------
価格エリア
-------------------------------------*/
.area_prices {
    padding: 50px 30px 30px 30px;
}

.area_prices_title {
    padding-bottom: 50px;
}

.area_prices_txt {
    padding-bottom: 30px;
}

.area_prices_content>img {
    padding-bottom: 20px;
}


/*--------------------------------------------------
よくある質問エリア
-----------------------------------------------------*/
.area_faq {
    background-color: var(--background-color);
    padding: 50px 30px;
}

.area_faq .area_faq__body {
    margin: 0 auto;
    max-width: 800px;
}

.faq_section {
    width: 80%;
    margin: 0 auto;
}

.faq-content {
    --gap: 0.5em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f5ecdf;
    border-radius: 5px;
}

.faq-content:after {
    content: "";
    position: absolute;
    inset-block-start: 1.2rem;
    /* 下に移動 */
    inset-inline-end: 0.75rem;
    display: block;
    inline-size: 1rem;
    aspect-ratio: 1;
    background: #704808;
    overflow: hidden;
    rotate: 0deg;
    transition: rotate 0.4s 0s ease;
    clip-path: polygon(25% 10%, 25% 90%, 75% 50%);
}

.faq-content[open]:after {
    rotate: 90deg;
}

.faq-content[open] .faq-q:after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
}

.faq-q {
    font-weight: bold;
    display: flex;
    gap: var(--gap);
    /* padding: 1rem 1.5rem 1rem 0; */
}

.faq-q:before {
    content: "Q";
    display: block;
    color: #704808;
    min-width: 20px;
}

.faq-q::-webkit-details-marker {
    display: none;
}

.faq-q:hover {
    color: #fb8490;
    cursor: pointer;
}

.faq-a {
    overflow: hidden;
    margin: 0;
    display: flex;
    gap: var(--gap);
    padding: 1rem 1rem 0rem 0 !important;
    margin-top: 30px;
    border-top: 1px dotted #bbb;
}

.faq-a:before {
    content: "A";
    font-weight: bold;
    color: #ff6272;
    min-width: 20px;
}

/*-------------------------------------
CTAエリア設定
-------------------------------------*/
.area_cta {
    background-image: url("https://jyosanshimiki.com/monndaisyuu/wp-content/themes/workbook/images/cta_bg.png");
    background-size: cover;
    padding: 35px 30px 50px 30px;
}

.area_cta_inr {
    padding-top: 8px;
}

.cta_btn {
    animation: pulse 1.6s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
    padding-bottom: 8px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.fixed_cta {
    display: none;
}

/*-------------------------------------
フッター設定
-------------------------------------*/
.footer {
    background: var(--main-color);
    padding: 2em 0em;
    text-align: center;
    font-size: 1.4em;
}

.footer a {
    color: var(--font-color);
    cursor: pointer;
}

/*-------------------------------------
利用規約
-------------------------------------*/
.term {
    /* max-width: 800px; */
    margin: 0 auto;
}

.term__section_block {
    padding: 45px 20px 50px 20px;
}

.term__title {
    text-align: center;
}

.term__title h1 {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
    font-weight: bold;
}

.term__title h1:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: var(--main-color);
    border-radius: 2px;
}

.term__body {
    margin-top: 30px
}

.term__body h2 {
    padding: 20px 0 10px 0;
    font-size: 1.3rem;
    margin: 0;
}

.term__body ol {
    padding: 20px 0 20px 20px;
    margin: 0;
}

.term__body ol ol {
    list-style-type: lower-alpha;
}

.term__body .list-style__disc {
    padding: 10px 20px;
    list-style-type: disc;
}

/* ----------------------------
rwd.css
---------------------------- */
@charset "UTF-8";

/* CSS Document */

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

    /*-------------------------------------
スマホ用レイアウト(768px以下スクリーン)
-------------------------------------*/
    /* body全体の初期スタイル調整 */
    body {
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /*-----------------------------------
見出しタグ設定(スマホ)
-------------------------------------*/
    h2 {
        font-size: 1.6em;
    }

    h3 {
        font-size: 1.4em;
    }

    h4 {
        font-size: 1.2em;
    }

    h5 {
        font-size: 1em;
    }

    /*-------------------------------------
全体レイアウト/背景設定(スマホ)
-------------------------------------*/
    /* 記事(ボディ)エリア */
    .article {
        border-left: none;
        border-right: none;
    }

    /* カラム全体の幅を変更する */
    .article,
    .top_image_in {
        width: 100%;
    }

    /*-------------------------------------
上部固定ヘッダー設定
-------------------------------------*/
    /* ヘッダー部分をカラム幅にする */
    .header_inr {
        max-width: 100%;
        padding: 10px 20px;
    }

    /* ヘッダーのロゴ */
    .header_logo {
        width: 25%;
    }

    /* ヘッダーの問い合わせ */
    .header_mail {
        width: 30%;
    }

    /* ヘッダーの電話ボタン */
    .header_tel {
        width: 35%;
    }

    /*-------------------------------------
ファーストビュー設定
-------------------------------------*/
    .top_image {
        background-image: none;
    }

    /*-------------------------------------
section設定
-------------------------------------*/
    .section_01 {
        padding: 0.5em;
    }

    .section_02 {
        padding: 0.5em;
    }

    /*-------------------------------------
チェックリスト設定
-------------------------------------*/
    ul.checklist li {
        background-size: 7%;
        padding-left: 2em;
    }

    /*-------------------------------------
テーブル設定
-------------------------------------*/
    .table_style_01 tr,
    .table_style_01 th,
    .table_style_01 td {
        display: block;
    }

    .table_style_01 th,
    .table_style_01 td {
        width: 100%;
    }


    /*-------------------------------------
フォーム設定
-------------------------------------*/
    .input_style {
        font-style: 1.2em;
    }

    /*-------------------------------------
特徴エリア
-------------------------------------*/
    .area_features {
        padding: 45px 20px;
    }

    /*-------------------------------------
お客様の声エリア
-------------------------------------*/
    .area_voices {
        padding: 45px 20px;
        background-color: var(--background-color);
    }

    /*-------------------------------------
価格エリア
-------------------------------------*/
    .area_prices {
        padding: 45px 20px;
    }

    /*-------------------------------------
よくある質問設定
-------------------------------------*/
    .area_faq {
        padding: 45px 20px;
    }

    .box_qa_q {
        padding: 1em;
    }

    .box_qa_a {
        padding: 1em;
    }

    .box_qa_q p,
    .box_qa_a p {
        text-indent: 0em;
    }

    .faq-q {
        max-width: 315px;
    }

    /*-------------------------------------
CTAエリア設定
-------------------------------------*/
    .area_cta {
        padding: 30px 20px 40px 20px;
    }

    .area_cta_inr_left {
        float: none;
        width: 100%;
        margin-bottom: 1em;
    }

    .area_cta_inr_right {
        float: none;
        width: 100%;
    }

    .fixed_cta {
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 1000;
        margin: 0 auto;
        overflow: hidden;
    }

    .fixed_cta.is-visible {
        display: flex;
    }

    /*-------------------------------------
フッター設定
-------------------------------------*/
    .footer {
        font-size: 1.2em;
    }
}

/* ----------------------------
advanced.css
---------------------------- */
@charset "UTF-8";

/*------------------------------------------------------------
hover・・・ボタンホバー効果
-------------------------------------------------------------*/
.btn:hover {
    opacity: 0.7;
}

/*------------------------------------------------------------
clear・・・クリアフィックス解除
-------------------------------------------------------------*/
.clearfix {
    clear: both;
}

/*------------------------------------------------------------
align・・・文字の横位置
-------------------------------------------------------------*/
.al-c {
    text-align: center;
}

/*中央寄せ*/
.al-r {
    text-align: right;
}

/*右寄せ*/
.al-l {
    text-align: left;
}

/*左寄せ*/
/*------------------------------------------------------------
margin・・・周りのブロックからの距離
-------------------------------------------------------------*/

.m0 {
    margin: 0 !important;
}

/*周りからのmarginを0に*/
.m0-t {
    margin-top: 0 !important;
}

/*上からのmarginを0に*/
.m0-r {
    margin-right: 0 !important;
}

/*右からのmarginを0に*/
.m0-b {
    margin-bottom: 0 !important;
}

/*下からのmarginを0に*/
.m0-l {
    margin-left: 0 !important;
}

/*左からのmarginを0に*/
.m5 {
    margin: 5px !important;
}

.m5-t {
    margin-top: 5px !important;
}

.m5-r {
    margin-right: 5px !important;
}

.m5-b {
    margin-bottom: 5px !important;
}

.m5-l {
    margin-left: 5px !important;
}

.m10 {
    margin: 10px !important;
}

.m10-t {
    margin-top: 10px !important;
}

.m10-r {
    margin-right: 10px !important;
}

.m10-b {
    margin-bottom: 10px !important;
}

.m10-l {
    margin-left: 10px !important;
}

.m15 {
    margin: 15px !important;
}

.m15-t {
    margin-top: 15px !important;
}

.m15-r {
    margin-right: 15px !important;
}

.m15-b {
    margin-bottom: 15px !important;
}

.m15-l {
    margin-left: 15px !important;
}

.m20 {
    margin: 20px !important;
}

.m20-t {
    margin-top: 20px !important;
}

.m20-r {
    margin-right: 20px !important;
}

.m20-b {
    margin-bottom: 20px !important;
}

.m20-l {
    margin-left: 20px !important;
}

.m25 {
    margin: 25px !important;
}

.m25-t {
    margin-top: 25px !important;
}

.m25-r {
    margin-right: 25px !important;
}

.m25-b {
    margin-bottom: 25px !important;
}

.m25-l {
    margin-left: 25px !important;
}

.m30 {
    margin: 30px !important;
}

.m30-t {
    margin-top: 30px !important;
}

.m30-r {
    margin-right: 30px !important;
}

.m30-b {
    margin-bottom: 30px !important;
}

.m30-l {
    margin-left: 30px !important;
}

.m40 {
    margin: 40px !important;
}

.m40-t {
    margin-top: 40px !important;
}

.m40-r {
    margin-right: 40px !important;
}

.m40-b {
    margin-bottom: 40px !important;
}

.m40-l {
    margin-left: 40px !important;
}

.m50 {
    margin: 50px !important;
}

.m50-t {
    margin-top: 50px !important;
}

.m50-r {
    margin-right: 50px !important;
}

.m50-b {
    margin-bottom: 50px !important;
}

.m50-l {
    margin-left: 50px !important;
}

.m60 {
    margin: 60px !important;
}

.m60-t {
    margin-top: 60px !important;
}

.m60-r {
    margin-right: 60px !important;
}

.m60-b {
    margin-bottom: 60px !important;
}

.m60-l {
    margin-left: 60px !important;
}

.m70 {
    margin: 70px !important;
}

.m70-t {
    margin-top: 70px !important;
}

.m70-r {
    margin-right: 70px !important;
}

.m70-b {
    margin-bottom: 70px !important;
}

.m70-l {
    margin-left: 70px !important;
}

.m80 {
    margin: 80px !important;
}

.m80-t {
    margin-top: 80px !important;
}

.m80-r {
    margin-right: 80px !important;
}

.m80-b {
    margin-bottom: 80px !important;
}

.m80-l {
    margin-left: 80px !important;
}

.m90 {
    margin: 90px !important;
}

.m90-t {
    margin-top: 90px !important;
}

.m90-r {
    margin-right: 90px !important;
}

.m90-b {
    margin-bottom: 90px !important;
}

.m90-l {
    margin-left: 90px !important;
}

.m100 {
    margin: 100px !important;
}

.m100-t {
    margin-top: 100px !important;
}

.m100-r {
    margin-right: 100px !important;
}

.m100-b {
    margin-bottom: 100px !important;
}

.m100-l {
    margin-left: 100px !important;
}

/*------------------------------------------------------------
5、padding・・・周りのブロックからの距離（padding）
-------------------------------------------------------------*/

.p0 {
    padding: 0 !important;
}

.p0-t {
    padding-top: 0 !important;
}

.p0-r {
    padding-right: 0 !important;
}

.p0-b {
    padding-bottom: 0 !important;
}

.p0-l {
    padding-left: 0 !important;
}

.p5 {
    padding: 5px !important;
}

.p5-t {
    padding-top: 5px !important;
}

.p5-r {
    padding-right: 5px !important;
}

.p5-b {
    padding-bottom: 5px !important;
}

.p5-l {
    padding-left: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.p10-t {
    padding-top: 10px !important;
}

.p10-r {
    padding-right: 10px !important;
}

.p10-b {
    padding-bottom: 10px !important;
}

.p10-l {
    padding-left: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.p15-t {
    padding-top: 15px !important;
}

.p15-r {
    padding-right: 15px !important;
}

.p15-b {
    padding-bottom: 15px !important;
}

.p15-l {
    padding-left: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.p20-t {
    padding-top: 20px !important;
}

.p20-r {
    padding-right: 20px !important;
}

.p20-b {
    padding-bottom: 20px !important;
}

.p20-l {
    padding-left: 20px !important;
}

.p25 {
    padding: 25px !important;
}

.p25-t {
    padding-top: 25px !important;
}

.p25-r {
    padding-right: 25px !important;
}

.p25-b {
    padding-bottom: 25px !important;
}

.p25-l {
    padding-left: 25px !important;
}

.p30 {
    padding: 30px !important;
}

.p30-t {
    padding-top: 30px !important;
}

.p30-r {
    padding-right: 30px !important;
}

.p30-b {
    padding-bottom: 30px !important;
}

.p30-l {
    padding-left: 30px !important;
}

.p40 {
    padding: 40px !important;
}

.p40-t {
    padding-top: 40px !important;
}

.p40-r {
    padding-right: 40px !important;
}

.p40-b {
    padding-bottom: 40px !important;
}

.p40-l {
    padding-left: 40px !important;
}

.p50 {
    padding: 50px !important;
}

.p50-t {
    padding-top: 50px !important;
}

.p50-r {
    padding-right: 50px !important;
}

.p50-b {
    padding-bottom: 50px !important;
}

.p50-l {
    padding-left: 50px !important;
}

.p60 {
    padding: 60px !important;
}

.p60-t {
    padding-top: 60px !important;
}

.p60-r {
    padding-right: 60px !important;
}

.p60-b {
    padding-bottom: 60px !important;
}

.p60-l {
    padding-left: 60px !important;
}

.p70 {
    padding: 70px !important;
}

.p70-t {
    padding-top: 70px !important;
}

.p70-r {
    padding-right: 70px !important;
}

.p70-b {
    padding-bottom: 70px !important;
}

.p70-l {
    padding-left: 70px !important;
}

.p80 {
    padding: 80px !important;
}

.p80-t {
    padding-top: 80px !important;
}

.p80-r {
    padding-right: 80px !important;
}

.p80-b {
    padding-bottom: 80px !important;
}

.p80-l {
    padding-left: 80px !important;
}

.p90 {
    padding: 90px !important;
}

.p90-t {
    padding-top: 90px !important;
}

.p90-r {
    padding-right: 90px !important;
}

.p90-b {
    padding-bottom: 90px !important;
}

.p90-l {
    padding-left: 90px !important;
}

.p100 {
    padding: 100px !important;
}

.p100-t {
    padding-top: 100px !important;
}

.p100-r {
    padding-right: 100px !important;
}

.p100-b {
    padding-bottom: 100px !important;
}

.p100-l {
    padding-left: 100px !important;
}

/*------------------------------------------------------------
font-size・・・フォントサイズの設定
-------------------------------------------------------------*/

.b {
    font-weight: bold !important;
}

/*太字*/
.normal {
    font-weight: normal !important;
}

/*太字を解除*/
.big {
    font-size: 1.2em !important;
}

.big2 {
    font-size: 1.5em !important;
}

.big3 {
    font-size: 1.8em !important;
}

.small {
    font-size: 0.8em !important;
}

/*------------------------------------------------------------
color・・・フォントカラーの設定
-------------------------------------------------------------*/

.red {
    color: #ff0000 !important;
}

/*赤*/
.blue {
    color: #0000dd !important;
}

/*青*/
.green {
    color: #008000 !important;
}

/*緑*/
.yellow {
    color: #ffff00 !important;
}

/*黄*/
.navy {
    color: #1F26A9 !important;
}

/*紺*/
.orange {
    color: #ff6600 !important;
}

/*橙*/
.pink {
    color: #cc6699 !important;
}

/*ピンク*/
.purple {
    color: #660099 !important;
}

/*紫*/
.olive {
    color: #808000 !important;
}

/*黄土色*/
.lime {
    color: #00ff00 !important;
}

/*黄緑*/
.aqua {
    color: #167FA6 !important;
}

/*水色*/
.black {
    color: #000 !important;
}

/*黒*/
.gray {
    color: #ccc !important;
}

/*灰*/
.white {
    color: #fff !important;
}

/*白*/

/*------------------------------------------------------------
下線の設定
-------------------------------------------------------------*/

.underline {
    text-decoration: underline !important;
}

/*------------------------------------------------------------
蛍光ペンのようなボックスの設定
-------------------------------------------------------------*/

.box-yellow {
    padding: 2px;
    background-color: #ff9 !important;
}

/*黄色*/
.box-aqua {
    padding: 2px;
    background-color: #9ff !important;
}

/*水色*/
.box-gray {
    padding: 2px;
    background-color: #eee !important;
}

/*灰色*/
.box-red {
    padding: 2px;
    background-color: #fcc !important;
}

/*赤色*/


/*------------------------------------------------------------
入力フォームをハイライトする
-------------------------------------------------------------*/

input:focus,
textarea:focus,
input.focus,
textarea.focus {
    background-color: #ffffe4 !important;
}

/*------------------------------------------------------------
画像を簡単に回り込ませる（スマホでは解除ver.）
-------------------------------------------------------------*/

/*左に画像、右に文章*/
.left_01,
.left_02 {
    float: left;
    margin: 0.2em 0.4em 0.4em 0;
}

/*右に画像、左に文章*/
.right_01,
.right_02 {
    float: right;
    margin: 0.2em 0em 0.4em 0.4em;
}


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

    .left_01,
    .right_01 {
        float: none;
        margin: 0 0 0.5em;
    }

    .imgcenter_01 {
        width: 100%;
        text-align: center;
    }

    .imgcenter_01 img {
        width: 50%;
        height: auto;
    }


}

/*------------------------------------------------------------
スマホ改行コード(スマホ時のみ改行される)
-------------------------------------------------------------*/

.sp_br {
    display: none;
}

@media only screen and (max-width : 768px) {
    .sp_br {
        display: block;
    }

}