/* ================================ * /
        お問いわせパーツ
==================================== */

.speach-balloons-square-rd {
    width: 60%;
    height: 120%;
    padding: 5px;
    background-color: #fff;
    border-radius: 15px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
    @media (max-width: 920px) {
        .speach-balloons-square-rd {
            width: 80%;
        }
    }

.speach-balloons-square-rd::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 400px;
    bottom: -30px;
    border-right: 22px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    transform: rotate( 137deg);
}
    @media (max-width: 920px) {
        .speach-balloons-square-rd::after {
            left: 120px;
        }
    }

.contact_discription_font {
    font-family: kozuka-gothic-pro, sans-serif;
    font-style: normal;
    color: #000;
    font-size: 16px;
}
    @media (max-width: 920px) {
        .contact_discription_font {
            font-size: 16px;
        }
    }

.contact_way_font {
    font-family: kozuka-gothic-pro, sans-serif;
    font-style: normal;
    color: #000;
    font-size: 20px;
}
    @media (max-width: 920px) {
        .contact_way_font {
            font-size: 20px;
        }
    }

.contact_discription_img {
    width: 30%;
    height: auto;
    transition: .5s;
}
    @media (max-width: 920px) {
        .contact_discription_img {
            width: 50%;
        }
    }
.contact_discription_img:hover {
    transition: .5s;
    transform: scale(1.1);
}
.dippo_contact_disp_img {
    width: 50%;
    height: auto;
}
    @media (max-width: 920px) {
        .dippo_contact_disp_img {
            width: 100%;
        }
    }

/* ================================ * /
            余白 設定
==================================== */
.gap-control {
    height: 3rem;
}
    @media (min-width: 640px) {
        .gap-control {
            height: 5rem;
        }
        }
    @media (min-width: 1200px) {
        .gap-control {
            height: 7rem;
        }
    }
.gap-control-mini {
    height: 4rem;
}
    @media (min-width: 920px) {
        .gap-control-mini {
            height: 3rem;
        }
    }

/* ================================ * /
            FONT 設定
==================================== */
.font_color_red {
    color: #A62D2E;
}

.font-color_white {
    color: #fff;
}

.font_color_black {
    color: #000000;
}

.font_color_gray {
    color: #a9a9a9;
}

/*  平成丸ゴシック weight = 400,800 */
.heisei_maru {
    font-family: heisei-maru-gothic-std, sans-serif;
    font-style: normal;
}

/*  小塚ゴシック weight = 200,300,400,500,700,900 */
.kozuka-gothic-pro {
    font-family: kozuka-gothic-pro, sans-serif;
    font-style: normal;
}

/* 丸々ゴシック weight = 400 */
.maru-maru-gothic {
    font-family: maru-maru-gothic-blr-stdn, sans-serif;
    font-style: normal;
}

/* Kiwi Maru weight = 300,400,500 */
.kiwi_maru {
    font-family: 'Kiwi Maru', serif;
}

.font_weight_200 {
    font-weight: 200;
}
.font_weight_300 {
    font-weight: 300;
}
.font_weight_400 {
    font-weight: 400;
}
.font_weight_500 {
    font-weight: 500;
}
.font_weight_700 {
    font-weight: 700;
}
.font_weight_800 {
    font-weight: 800;
}
.font_weight_900 {
    font-weight: 900;
}

.font_size_10 {
    font-size: 10px;
}
.font_size_15 {
    font-size: 15px;
}
.font_size_20 {
    font-size: 20px;
}
.font_size_30 {
    font-size: 30px;
}
.font_size_40 {
    font-size: 40px;
}
.font_size_60 {
    font-size: 60px;
}

.line_height_10{
    line-height: 10px;
}
.line_height_15{
    line-height: 15px;
}
.line_height_25{
    line-height: 25px;
}
.line_height_50{
    line-height: 50px;
}

/*===================================
        Contact page 設定
==================================== */

/* マークペンの設定 */
.mark_pen_yellow{
    background: -webkit-linear-gradient(left, #ff6 50%, transparent 50%);
    background: -moz-linear-gradient(left, #ff6 50%, transparent 50%);
    background: linear-gradient(left, #ff6 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 1s;
}
.mark_pen_white{
    background: -webkit-linear-gradient(left, #fff 50%, transparent 50%);
    background: -moz-linear-gradient(left, #fff 50%, transparent 50%);
    background: linear-gradient(left, #fff 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 1s;
}
.mark_pen_white.is-active, .mark_pen_yellow.is-active{
    background-position: 0% .5em;
}

/* アニメーション設定_拡大 */
.zoomIn{
    animation-name:zoomInAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    animation-delay: .5s;
}

    @keyframes zoomInAnime{
    from {
    transform: scale(0.6);
    }

    to {
        transform: scale(1);
    }
}

/* DIVの背景色 */
.div_background_pink{
    background-color: #feebd9;
}

/* フォームの枠線_丸角_破線 */
.form_border_radius_dashed{
    border-radius: 15px;
    border-width:3px;
    border-style:dashed;
    border-color:#A62D2E;
    padding:35px;
}

/* 必須項目マーク */
.require_icon:after {
    vertical-align:super;
    padding: 0px 6px 0px 6px;
    border-radius: 5px;
    font-size: 0.6em;
    color: white;
    background-color: #A62D2E;
    content: "必須";
}

/* テキストボックス丸角 */
.textbox_border_radius{
    width: 100%;
    border-radius: 10px;
    border-width: inherit;
    line-height: 2;
}

.textbox_border_radius:focus{
    outline: none;
    border: 1px solid #feebd9;
    -webkit-box-shadow: 0px 0px 6px #A62D2E;
    -moz-box-shadow: 0px 0px 5px #A62D2E;
    box-shadow: 0px 0px 5px #A62D2E;
}

/* ラジオボタンCSS */
.rdobutton_label{
    position: relative;
    cursor: pointer;
    background-color: #FEEBD9;
}

.rdobutton_label::before,
.rdobutton_label::after {
    content: "";
    display: block; 
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}

.rdobutton_label::before {
    background-color: #A62D2E;
    border: 1px solid #A62D2E;;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    left: -1.5rem;
}

.rdobutton_label::after {
    background-color: #FFF;
    border-radius: 50%;
    opacity: 0;
    width: 14px;
    height: 14px;
    left: -1.35rem;
}

input:checked + .rdobutton_label::after {
    opacity: 1;
}

.rdobutton_radio {
    position: absolute;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
}

/* 個人情報の取り扱いのCSS設定 */
a.link_personalprivacy{
    color: #A62D2E;
    text-decoration:none;
    background:linear-gradient(transparent 50%, #FFF 50%);
}
a.link_personalprivacy:visited{
    color: #A62D2E;
}
a.link_personalprivacy:hover{
    color: #9f000c;
    text-decoration:none;
    font-weight: bold;
}

/* 確認・送信するボタン */
.btn--red.btn--cubic {
    background-color: #A62D2E;
    border-bottom: 5px solid #9f000c;
    font-weight: 400;
    line-height: 2.5;
    display: inline-block;
    color: #fff;
    width: 60%;
}
    @media (max-width: 650px) {
        .btn--red.btn--cubic {
            width: 100%;
        }
    }
.btn--red.btn--cubic:hover {
    margin-top: 3px;
    border-bottom: 2px solid #9f000c;
}

/* 入力画面へ戻るボタン */
.btn--pink.btn--cubic {
    background-color: feebd9;
    border-bottom: 5px solid #9f000c;
    border-color: #9f000c;
    font-weight: 400;
    line-height: 2.5;
    display: inline-block;
    color: #A62D2E;
    width: 60%;
}
    @media (max-width: 650px) {
        .btn--pink.btn--cubic {
            width: 100%;
        }
    }
.btn--pink.btn--cubic:hover {
    margin-top: 3px;
    border-bottom: 2px solid #9f000c;
}

.btn--radius {
    border-radius: 100vh;
}

.title_font {
    font-size: 64px;
}
    @media (max-width: 920px) {
        .title_font {
            font-size: 40px;
        }
    }

/* 送信完了カバ */
.contact_cava{
    width: 100%;
    height: auto;
}

.contact_confirm_font{
    font-family:  heisei-maru-gothic-std, sans-serif;
    font-style: normal;
    color: #A62D2E;
    font-size: 20px;
    margin-right: 0;
}
    @media (max-width: 650px) {
        .contact_confirm_font {
            font-size: 16px;
        }
    }

.contactpage_discription_font {
    font-family:  heisei-maru-gothic-std, sans-serif;
    font-style: normal;
    color: #A62D2E;
    font-size: 1em;
    margin-right: 0;
}
    @media (max-width: 920px) {
        .contactpage_discription_font {
            font-size: 16px;
        }
    }
.lineId_font {
    background-color: #FFF4EB;
    padding: 2px 3px 4px 1px;
    border-bottom:solid 4px #F9DAC0;
    border-right:solid 2px #F9DAC0;
}

/* ================================ * /
        instance page 設定
/* ================================ * /
/* 作成事例一覧の画像の枠線 */
.box_work {
    margin: 2em 0;
    border: solid 6px #A62D2E;/*線*/
    position: relative;
    overflow:hidden;
}

/* 作成事例のWEB・PRINT・LOGOの文字の設定 */
.box_font {
    background-color: #A62D2E;
    padding: 0.3em 0.7em 0.3em 1em;
    font-weight: bold;
    letter-spacing: 0.2em;
}

/* 作成事例一覧のWEB・PRINT・LOGOの文字の右上固定 */
.box_font_position {
    position: absolute;
    top: 0;
    right: 0;
}

/* 作成事例にホバーしたときのスタイル */
.box_work img:hover {
    opacity: 0.75;
    transform:scale(1.1,1.1);
    transition:1s all;
}

/* WEB・PRINT・LOGOのタブ設定 */
.tab_container {
    padding-bottom: 1em;
    margin: 0 auto;
}
.tab_item {
    width: 6em;
    /* 上 | 右 | 下 | 左 */
    padding: 10px 10px 10px 13px;
    background-color: #fff;
    text-align: center;
    color: #A62D2E ;
    border: solid 3px #A62D2E;/*線*/
    font-weight: bold;
    transition: all 0.2s ease;
    letter-spacing: 0.2em;
}
.tab_item:hover {
    opacity: 0.75;
}
input[name="tab_item"] {
    display: none;
}
.tab_content {
    display: none;
    clear: both;
    overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content { 
    display: block;
}
.tab_container input:checked + .tab_item {
    background-color: #A62D2E ;
    color: #fff;
}

/* ================================ * /
            work page 設定
==================================== */

/* HPリンク フォントの下線 */
.link-dotted-font {
    border-bottom: dotted 2px #000;
    transition: .4s;
    padding-bottom: 1px;
    font-family: "kozuka-gothic-pro", sans-serif;
    font-size:1.8rem;
}
.link-dotted-font:hover {
    border-bottom: dotted 2px #A62D2E;
    color: #A62D2E;
    text-decoration: none;
    
}
/* URLにホバーしたときの設定 */
/* .hover_red:hover {
    color: #A62D2E;
    text-decoration: none;
} */

/* 一覧に戻るリンクの設定 */
.ichiran-back-font {
    font-family: kozuka-gothic-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #A62D2E;
    /* background: #f7f7f7; */
    padding: 10px 18px;
    transition: .4s;
    border: solid 3px #A62D2E;
    font-size: 18px;
    padding-top: 12px;
}
    @media (min-width: 640px) {
        .ichiran-back-font  {
            font-size: calc(18px + ((1vw - 6.4px)*(4/5.6)));
        }
    }
    @media (min-width: 1200px) {
        .ichiran-back-font  {
            font-size: 22px; /* 最大値 */
        }
    }

.ichiran-back-font:hover {
    background-color: #A62D2E;
    color: #fff;
    transition: .4s;
    text-decoration: none;
}

/* 実績一覧ページ追加 */
.tab__area__justify-content {
    justify-content: space-evenly;
}

.tab-content__area--margin {
    margin: 3% 0;
}

.box__area--max-width {
    max-width: 400px;
}

a:hover {
    text-decoration: none;
}

/* 実績詳細ページPC */
.instance__site--fontsize {
    font-size: 2.4rem;
}

.instance__direction--lettoer-spacing {
    letter-spacing: 0.5px;
}

.contact__string {
    background-color: #FFF;
    border-radius: 10px;
    width: 100%;
    max-width: 870px;
    padding: 2rem;
}

.contact__string--justify-content-center {
    justify-content: center;
}

.contact__logo--font-size {
    font-size: 2.4rem;
}

.option__string {
    width: 100%;
    max-width: 900px;
    margin-top: 2em;
}

.option__img--border-radius {
    border-radius: 30px;
    max-width: 300px;
    width: 100%;
}

.option__area--fix {
    max-width: 600px;
    text-align: center;
}

.option__contents--justify-contents {
    justify-content: space-evenly;
}

.instance__contents--margin{
    margin: 0 auto;
    max-width: 870px;
}
@media (max-width: 880.999999px) {
    .instance__contents--margin{
        margin: 0 1.5rem;
    }
}

.instance__contents-p--padding {
    padding: 1.5rem 4.5rem;
}

.instance__contents-p--line-height {
    line-height: 1.5;
}

.instance__contents-logo--padding {
    padding-left: 2.8rem;
}

.instance__img--margin{
    margin: 0;
}

.instance__option--color {
    color: #A62D2E;
}

.instance__option--width-margin {
    max-width: 900px;
    justify-content: space-between;
    margin: 0 1.5rem;
    padding-left: 2.6rem;
    padding-right: 2.6rem;
    gap:20px;
}
.spacer-div{
    margin:0 auto;
    max-width: 900px;
    width:100%
}
@media (max-width: 870px) {
    .instance__option--width-margin {
        margin: 0 0;
    }
}

@media (max-width: 701.999999px) {
    .instance__option--width-margin {
        justify-content: center;
    }
}


.instance__contents--width {
    width: 100%;
    max-width: 900px;
}

.breadcrumbs {
    max-width: 1100px;
    margin: 2rem auto;
    padding-left: 1rem;
}

.breadcrumbs a {
    text-decoration: none;
    color: #A62D2E;
}

.breadcrumbs a:hover {
    text-decoration: none;
    cursor: pointer;
}
.breadcrumbs span {
    color: #A62D2E;
}

.breadcrumbs .separator {
    color: #A62D2E;
}

/* 実績詳細ページSP */
@media (max-width: 768px) {
    .breadcrumbs {
    font-size: 1.2rem;
}
}

@media (max-width: 520px) {
    br {
        display: none;
    }

    .instance__contents-p--font-size {
        font-size: 1.4rem;
    }

    .instance__contents-p--padding {
        padding: 1.5rem 4rem;
    }

    .contact__string {
        padding: 1rem 0;
    }
}

/* 作成事例写真サイズ設定 */
.work-photo {
    width: 300px;/* 最小値 */
    height: auto;
}
    @media (min-width: 1200px) {
    .work-photo {
    width: 600px;/* 最大値 */
    height: auto;
    }
}

@media (min-width: 768px) {
        .box_work {
            max-width: 400px;

        }
    }

/*===================================
            Plan page 設定
==================================== */
/* キラキラアイコンサイズ設定 */
.i-test {
    width: 40px;/* 最小値 */
    height: 40px;
}
    @media (min-width: 1200px) {
        .i-test {
            width: 100px; /* 最大値 */
            height: 100px;
        }
    }

/* キラキラアイコンと文字を並列にする設定 */
.flex {
        display: flex;
        justify-content: center;
}
    
/* 詳細4点の並び設定 */
.box_about {
        position: relative;
}
    
/* 改行しない設定 */
.no_break {
    white-space: nowrap;
}

/* 改行レスポンシブ設定 */
@media screen and (min-width: 650px){
    .br-pc {
        display:block;
    }
    .br-sp {
        display:none;
    }
    }
    @media screen and (max-width: 650px){
    .br-pc {
        display:none;
    }
    .br-sp {
        display:block;
    }
    }

/* カード共通設定（プラン・オプションで使用） */
/* カードサイズ設定 */
.card {
    width: 430px;
    margin-bottom: 10px !important;
    margin: auto;
}

/* カードヘッダー設定 */
.card_header_color {
    background-color: #A62D2E;
    color: #FFFFFF;
    font-size: 20px;
}

/* プランカード設定 */
/* プランカード文字設定 */
.plan_card_text {
    font-family: heisei-maru-gothic-std, sans-serif;
    margin-bottom: 0px;
    color: #A62D2E;
    /* font-weight: 500; */
    font-size: 20px;
}
/* プラン値段強調設定 */
@media (max-width:480px) {
    .plan_price_size {
        font-size: 50px;
    }
    }

/* オプションカード設定
オプションカード文字設定 */
.option_card_text {
    font-family: heisei-maru-gothic-std, sans-serif;
    margin-bottom: 0px;
    color: #A62D2E;
    font-weight: 500;
    font-size: 17px;
}
    @media screen and (max-width:480px){
        .option_card_text {
            font-size: 16px;
        }
    }

.option_card_title_text {
    font-family: kozuka-gothic-pro, sans-serif;
    margin-bottom: 0px;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .3em;
}

    @media screen and (max-width:480px){
        .option_card_title_text {
            font-size: 16px;
        }
    }    


.option_card_text_illust {
    margin-bottom: 0px;
    color: #A62D2E;
    font-weight: 700;
    font-size: 16px;
}

.under_dashed {
    border-bottom: dashed 1px #A62D2E;
}

.left_solid {
    border-left-style: solid;
    border-left-color: #A62D2E;
}
@media screen and (max-width: 650px){
    .left_solid {
        border-left-style: none;
    }
    }


/* サービス内容背景色設定 */
@media screen and (min-width: 650px){
    .about_background {
        background-color: white;
    }
    }

/* オプション値段強調設定 */
@media (max-width:480px) {
    .option_price_size {
        font-size: 40px;
    }
    }

/* プラン比較表サイズ設定 */
.comparison_table {
    width: 80%;
    height: auto;

}

/* チェックマーク設定 */
.fa-check-circle {
    color: #A62D2E;
}

/* 申し込みステップナンバー画像設定 */
.img_step_no {
    width: 50%;
    height: auto;
}

/* 各セクション項目文字サイズ */
@media screen and (min-width: 650px){
    .main_text {
        font-size: 30px;
    }
    }
    @media screen and (max-width: 651px){
        .main_text {
            font-size: 23px;
        }
        }
    
.plan_box {
    padding: 0px 10px;
}

/* プラン別サービス内容のカードスタイル（上部分） */
/* .card-top {
    background-color: #A62D2E;
    width: 15rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* プラン別サービス内容のカードスタイル */
.service-card-style {
    height: auto;
    display: inline-block;
}

.service-card-skin {
    width: calc(100%/7);
    overflow: hidden;
    border-radius: 8px;
    min-width: 200px;
    margin: 1%;
}


/* プラン別サービス内容のカードスタイル（上部） */
.container-fluid2{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.service-card_imgframe {
    width: auto;
    height: 150px;
    background-color: #A62D2E;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* プラン別サービス内容のカードスタイル（下部） */
.service-card_textbox {
    width: auto;
    height: auto;
    padding: 20px 10px;
    background-color: #ffffff;
    /* box-sizing: border-box; */
}
.service-card_textbox > * + *{
    margin-top: 10px;
}

.service-card-title {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.1em;
    font-size: 16px;
}

@media screen and (max-width: 450px) {
    .service-card-skin {
        width: 48%;
        min-width:0;
    }
}
@media screen and (max-width: 300px) {
    .service-card-skin {
        width: 100%;
        min-width:0;
    }
}
    @media (min-width: 640px) {
        .service-card-title  {
            font-size: calc(16px + ((1vw - 6.4px)*(4/5.6)));
        }
    }
    @media (min-width: 1200px) {
        .service-card-title  {
            font-size: 17px; /* 最大値 */
        }
    }

    /* カード内文字左揃え用 */
.service-card-text {
    margin: 0 auto;
    text-align: center;
    display: block;
}
.service-card-text .text {
    text-align: left;
    display: inline-block;
    font-size: 16px;
}
    @media (min-width: 640px) {
        .service-card-text .text  {
            font-size: calc(16px + ((1vw - 6.4px)*(4/5.6)));
        }
    }
    @media (min-width: 1200px) {
        .service-card-text .text  {
            font-size: 16px; /* 最大値 */
        }
    }

    /* オプション画像設定 */
    .option_img{
        max-width: 80%;
        display: block;
        margin: 0 auto;
    }

    .option_text {
        font-size: clamp(18px,100vw/40,24px);
        text-align: left;
        margin-top: 10%;
    }
    .option_text2{
        font-size: clamp(16px,100vw/55,20px);
    }
    @media screen and (max-width: 300px) {
        .option_text {
            font-size: 16px;
        }
    }
    @media screen and (max-width: 767.9px) {
        .option_itiran {
            max-width:380px;
            margin:0 auto;
        }
    }
/*===================================
            FAQ page 設定
/*===================================
/* 説明文言 */
.font_rwd{
    font-size: 30px;
}
    @media screen and (min-width: 651px) and (max-width: 850px){
        .font_rwd {
            font-size: 20px;
        }
        }
    @media screen and (max-width: 650px){
        .font_rwd {
            font-size: 16px;
        }
        }

/* 大分類ボダン */
.btn-border {
    font-family: "Font Awesome 5 Free";
    border: 2px solid #FEEBD9;
    background: #FEEBD9;
    border-color: #A62D2E;
    padding-left: 15px;
    padding-right: 15px;
    font-weight:bold;
    color: #A62D2E;
    margin: 10px 10px 10px 10px;
    width: 20em;
    padding:15px 0;
    text-align: center;
    transition: all 0.2s ease;
    letter-spacing: 0.2em;
}
    @media screen and (min-width: 651px) and (max-width: 850px){
        .btn-border {
            margin: 5px 5px 5px 5px;
            font-size: 14px;
        }
        }
    @media screen and (max-width: 650px){
        .btn-border {
            margin: 2px 2px 2px 2px;
            padding: 10px 0;
            font-size: 10px;
        }
        }
    
.btn-border:before{
    content: "\f101";
}
.btn-border:hover:before{
    content: "\f103";
}
.btn-border:hover {
    border: 2px solid #A62D2E;
    background: #A62D2E;
    border-color: #A62D2E;
    font-weight:bold;
    color: #FEEBD9;
}
.category_button {
    position:static;
    top: 40px;
    left: 0px;
    padding-top: 10px;
    width: 100%;
    background-color: #FEEBD9;
    z-index: 1000;
    max-width: -webkit-fill-available;
}
    @media screen and (max-width: 650px){
        .category_button {
            top: 10px;
            display:flex;
            flex-direction: column;
            align-items: center
        }
        }

/*　大分類ボダン内文字 */
.category_button_text{
    font-size: 16px;
}

/* 大分類タイトル */
.category_title{
    font-size: 88px;
    color: #F4D6C6;
    font-weight:bold;
    margin-top: 160px;
    z-index: 1;
}
    @media screen and (min-width: 651px) and (max-width: 850px){
        .category_title {
            margin-top: 100px;
            font-size: 60px;
        }
        }
    @media screen and (max-width: 650px){
        .category_title {
            margin-top: 100px;
            font-size: 35px;
        }
        }
:target:before {
    content: "";
    display: block;
    height: 20px;
    }

/* アニメーション設定_説明文言、大分類タイトル */
.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
    @keyframes fadeUpAnime{
        from {
            opacity: 0;
            transform: translateY(100px);
        }
        
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
        
/* スクロールをしたら出現する要素にはじめに透過0を指定  */
.fadeUpTrigger{
    opacity: 0;
}


/* 折り畳みQA */
/* アコーディオンメニュー全体のサイズ・位置 */
.ac {
    width: 90%;
    max-width: 80%;
    margin: 0 auto;
}

/* クリック領域 */
/* 質問の設定 */
.ac-parent {
    font-family: maru-maru-gothic-blr-stdn, sans-serif;
    border: 2px solid #A62D2E;
    border-radius: 1rem;
    text-align: left;
    color: #fff;
    padding: .8rem;
    cursor: pointer;
    display: flex;
    margin-top: 30px;
    background-color: #A62D2E;
}

/* FAQメニュー設定 */
/* QA icon */
.icon_qa{
    font-size: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding-top: 4px;
    border: #A62D2E solid 2px;
    border-color: #A62D2E;
    border-radius: 50%;
    background-color: #A62D2E;
    color: #FEEBD9;
    text-align: center;
    vertical-align: top;
}
    @media screen and (min-width: 651px) and (max-width: 800px){
        .icon_qa {
            font-size: 16px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            padding-top: 0px;
        }
        }
    @media screen and (max-width: 650px){
        .icon_qa {
            font-size: 12px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            padding-top: 0px;
        }
    }
.icon_qa_white {
    font-size: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding-top: 4px;
    border: #FEEBD9 solid 2px;
    border-color: #FEEBD9;
    border-radius: 50%;
    background-color: #A62D2E;
    color: #FEEBD9;
    text-align: center;
    vertical-align: top;
}
    @media screen and (min-width: 651px) and (max-width: 800px){
        .icon_qa_white {
            font-size: 16px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            padding-top: 0px;
        }
    }
    @media screen and (max-width: 650px){
        .icon_qa_white {
            font-size: 12px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            padding-top: 0px;
        }
    }
.qa_content {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    vertical-align: top;
}
    @media screen and (min-width: 651px) and (max-width: 800px){
        .qa_content {
            font-size: 16px;
            line-height: 16px;
        }
        }
    @media screen and (max-width: 650px){
        .qa_content {
            font-size: 16px;
            line-height: 16px;
        }
        }

/* クリックしたら表示される領域 */
/* 答えの設定 */
.ac-child {
    display: none;
    padding: 2em 1em;
    font-family: maru-maru-gothic-blr-stdn, sans-serif;
    border-left: 2px solid #A62D2E;
    border-right: 2px solid #A62D2E;
    border-bottom: 2px solid #A62D2E;
    border-radius: 1rem;
    text-align: left;
    color: #A62D2E;
    padding: .8rem;
}

/* 答え表示後の設定 */
.anwser_display {
    margin: 0px;
    display: flex;
}

/* 画面TOPへボダン */
.fa-hand-point-up{
    color: #A62D2E;
    font-size: 40px;
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
}    
    @media screen and (min-width: 651px) and (max-width: 800px){
        .fa-hand-point-up {
            right: 25px;
            bottom: 40px;
        }
        }
    @media screen and (max-width: 650px){
        .fa-hand-point-up {
            font-size: 25px;
            right: 10px;
        }
        }
.fa-hand-point-up:hover{
    color:#9f000c;
    line-height: 20px;
    border: none;
    cursor: pointer;
}

.back_to_top_background{
    width: 50px;
    height: 50px;
    padding-top: 7px;
    text-align: center;
    border-radius: 50%;
    background-color: #ffffff8a;
}
    @media screen and (min-width: 651px) and (max-width: 800px){
        .back_to_top_background {
            padding-top: 7px;
        }
        }
    @media screen and (max-width: 650px){
        .back_to_top_background {
            width: 35px;
            height: 35px;
            padding-top: 5px;
        }
        }

/* アニメーション設定_画面TOPへボダン */
.up_move{
    animation: UpAnime 0.5s forwards;
}
    @keyframes UpAnime{
    from {
        opacity: 0;
        transform: translateY(150px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* DISCaVa QR code */
.discava_qrcode{
    max-width: 60%;
    height: auto;
    text-align: center;
}
    @media screen and (min-width: 651px) and (max-width: 850px){
        .discava_qrcode {
            max-width: 30%;
            height: auto;
        }
        }
    @media screen and (max-width: 650px){
        .discava_qrcode {
            max-width: 40%;
            height: auto;
        }
        }
.discava_qrcode_height{
    margin: 0px;
}

/*===================================
            TOP page 設定
==================================== */
/* タイトルロゴ画像設定 */
.index_title_img_size {
    width: 70%;
    height: auto;
    padding-top: 8%;
}
@media (max-width: 640px) {
    .index_title_img_size {
        width: 88%;
        padding-top: 20%;
    }
}
@media (min-width: 1100px) {
    .index_title_img_size {
        width: 37%;
        padding-top: 0;
    }
}

/* TOP背景色 */
.top_background {
    background-color: #A62D2E;
    height: 100vh;
    width: 100vw;
    position: relative;
}
.index_top_inner_logo {
    position: absolute;
    top: 20%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display: block;
}
    @media screen and (max-width: 640px){
        .index_top_inner_logo {
            top: 20%;
        }
    }
    @media screen and (min-width: 1100x){
        .index_top_inner_logo {
            top: -30%;
        }
    }
.index_top_inner_disp {
    position: absolute;
    top: 0;
    right: 0;
    bottom: -110%;
    left: 0;
    margin: auto;
    width: 100%;
    height: 80%;
    display: block;
}

.index_disp_font {
    font-family: heisei-maru-gothic-std, sans-serif;
    font-style: normal;
    font-size: 20px;
}
    @media (max-width: 920px) {
        .index_disp_font {
            font-size: 16px;
        }
    }


/* 悩む人、DISCaVaにおまかせ画像設定 */
.index_img_size {
    width: 90%;
    height: auto;
}
    @media (max-width: 640px) {
        .index_img_size {
            width: 90%;
        }
    }
    @media (min-width: 1100px) {
        .index_img_size {
            width: 60%;
        }
    }

/* 大項目背景設定 */
.background_title {
    color: white;
    background-color: #A62D2E;
    padding: 0.5em 1em;
    border-radius: 1em;
    display: inline-block
}

/* メインテキストサイズ設定 */
    @media screen and (min-width: 650px){
        .top_main_text {
            font-size: 30px;
        }
        }
        @media screen and (max-width: 651px){
            .top_main_text {
                font-size: 18px;
            }
        }
/* トップページの「こちら」リンクフォント */
.index_link_font {
    font-family: heisei-maru-gothic-std, sans-serif;
    font-style: normal;
    font-size: 1rem;
    border-bottom: dotted 1px #A62D2E;
    color: #A62D2E;
    transition: .5s;
}
.index_link_font:hover {
    color: #000;
    transition: .5s;
}
/* buttonテキストサイズ設定 */
@media screen and (min-width: 650px){
    .top_button_text {
        font-size: 30px;
    }
    }
    @media screen and (max-width: 651px){
        .top_button_text {
            font-size: 16px;
        }
        }
/* 特徴アイコン設定 */
    .top_icon {
        width: 100px;
        height: 100px;
        justify-content: center;
    }
    @media screen and (max-width: 651px){
        .top_icon {
            width: 80px;
            height: 80px;
            }
        }
/* 特徴flex設定 */
    .index_flex{
        max-width: 600px;
        margin: 0 auto;
}

    .index_img{
        max-width: 100%;
        display: block;
        margin: 0 auto;
}
    @media screen and (min-width:600px) { 
        .index_flex{
            display:flex;
            flex-wrap:nowrap;
            justify-content:space-between;
        }
        .indexitem+.indexitem{
            margin-left:1.0em;
        }
}

/* 要素をフェードイン */
.fadein {
    opacity : 0;
    transform: translateY(20px);
    transition: all 1.5s;
    }

/* 要素をフェードイン　スクロールなし */
.fade-in-bottom {
    opacity: 0;
    animation-name: fadein-bottom;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
    @keyframes fadein-bottom {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
}

/* 要素フェードインスクロールなし　0.5秒ディレイ */
.fade-in-bottom-delay {
    opacity: 0;
    animation-name: fadein-bottom;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
    @keyframes fadein-bottom {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
}

.mark_pen_white{
    background: -webkit-linear-gradient(left, #fff 50%, transparent 50%);
    background: -moz-linear-gradient(left, #fff 50%, transparent 50%);
    background: linear-gradient(left, #fff 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .6em; 
    background-position: 100% .8em;
    transition: 2s;
}
.mark_pen_white.is-active, .mark_pen_yellow.is-active{
    background-position: 0% .5em;
}

/* WEBフォントちらつき防止 */
html {
    visibility: hidden;
}
html.wf-active, html.loading-delay {
    visibility: visible;
}

/* ロードアニメ読み込みまでコンテンツを隠す */
.hidden{
    display: none;
}

/* ロードアニメ再生中コンテンツ幅調整 */
#showloading {
    width: 100%;
    height: 100vh;
    background-color: #FFF4EB ;
    position: relative;
}

/* ロードアニメサイズ設定 */
#showloading  img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: auto;
    transform: translate(-50%, -50%);
}
@media screen and (max-width:651px) { 
    #showloading  img{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        height: auto;
        transform: translate(-50%, -50%);
        }
    }

/* ローディングアニメフェードアウト */
.fadeout {
    animation : fadeOut .5s ease 1.7s;
    animation-fill-mode: both;
}
    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

/* ローディングアニメ再生後コンテンツフェードイン */
.contents_fadein {
    opacity: 0;
    animation-name: contents_fadein;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
    @keyframes contents_fadein {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
}