@charset "utf-8";

#main h3 {
    margin-top: 64px;
}

/* 文例数（右寄せ） */
#main h3 .header_r {
    position: absolute;
    right: 20px;
}
@media screen and (max-width: 750px) {
    #main h3 span {
        position: absolute;
        right: calc(24 * 100vw / 750);
    }    
}
/* キャンペーンエリアに納期表示する場合はトップのサイドバナーを非表示 */
#box_noki {
   /* display: none;*/
}

/* ==========================================================================
# KV スライダー
========================================================================== */
.mv {
    width: 1200px;
    margin: 0 auto 60px;
    display: flex;
    gap: 6px;
}
.mv img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.mv a:hover {
    transition: 0.3s;
}
.mv .mv_main {
    width: 974px;
    position: relative;
}
@media screen and (max-width: 750px) {
    .mv {
        width: auto;
        margin: 0 auto calc(40*100vw/750);
        display: block;
    }
    .mv .mv_main {
        width: 100%;
    }
}
.mv .mv_main_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: absolute;
    bottom: 41px;
    left:38px;
    gap: 8px 11px;
}
.mv .mv_main_item a {
    display: block;
    width: 128px;
    height: 32px;
    line-height: 32px;
    background: #FFF;
    color: #1C2F61;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.mv .mv_main_item a:hover {
    background: #1C2F61;
    color: #FFF;
    outline: 1px solid #BBB;
    outline-offset:-1px;
}

.mv .mv_bnr {
    width: 220px;
}
.mv .mv_bnr_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mv .mv_bnr_list a:hover{ 
    opacity: 0.7;
}

/*@media screen and (max-width: 1000px) {
    .mv {
        margin: 80px 0 0;
    }
}*/

.mv_slider-list {
    display: none;
}
.mv_slider-list.slick-initialized {
    display: block;
}
.mv_slider-item {
    margin: 0 10px;
    transition: opacity .4s;
}
.mv_slider-item:hover {
    opacity: .6;
}
.hover_none:hover {
    opacity: 1 !important;
}
.mv_slider-item {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    /*transform: scale(.85);*/
}
.mv_slider-item.is-active {
    transform: scale(1);
}

/* slick-dots 設定 */
.mv_slider .slick-prev {
    left: 50%;
    transform: translate(-465px, -50%);
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.16));
}
.mv_slider .slick-next {
    right: 50%;
    transform: translate(465px, -50%);
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.16));
}
.mv_slider .slick-dots {
    bottom: -20px;
}
.mv_slider .slick-dots li {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.mv_slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    text-indent: -9999px;
    outline: 0;
    transition-duration: .3s;

    margin: 0 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    background: #333;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.mv_slider .slick-dots li button:before {
    content: none;
}
.mv_slider .slick-dots li button:hover,
.mv_slider .slick-dots li.slick-active button {
    opacity: 1;
}

/* slick Arrows */
.slick-prev,
.slick-next {
    width: 40px !important;
    height: 40px !important;
    z-index: 100;
}
.slick-prev:before,
.slick-next:before {
    font-size: 40px !important;
    color: transparent !important;
}
.slick-arrow:before {
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}
.slick-next:before {
    background: url(/img/mv/ico_slickarrow-r.png) !important;
    background-size: contain !important;
}
.slick-prev:before {
    background: url(/img/mv/ico_slickarrow-l.png) !important;
    background-size: contain !important;
}


/* ==========================================================================
# おすすめデザイン スライダー
========================================================================== */
#box_recommend {
    width: 100vw;
    margin: 4px calc(50% - 50vw) 14px;
}

@media screen and (max-width: 1000px) {
    #box_recommend {
        margin: 4px 0 14px;
    }
}

.recommend_slider-list {
    margin: 16px -20px 0;
}

.recommend_slider-item {
    width: 220px;
    padding: 18px 8px;
}

.recommend_slider-item img {
    width: 100%;
    border-radius: 10px;
    transition: opacity .3s;
}

.recommend_slider-link {
    display: block;
}

.recommend_slider-link:hover img {
    opacity: .6;
}

/* ==========================================================================
# キャンペーンボックス（おすすめ非表示時）
========================================================================== */
.box_campaign {
    padding-top: 20px;
    text-align: center;
}

.box_campaign a {
    transition-duration: 0.3s;
}

.box_campaign a:hover {
    opacity: 0.7;
}
.box_campaign a img{
    width: 710px;
}
/* バナー2つ表示バージョン */
/*.box_campaign {
    width: 750px;
    margin: 0 auto 30px;
    display: flex;
    justify-content: space-between;
}

.box_campaign a {
    width: 360px;
    display: block;
}*/


/* 人気文例（spのみ）
-------------------------------------------------*/
@media screen and (max-width: 750px) {
    .popular_sentence {
        margin: calc(30 * 100vw / 750) 0 calc(30 * 100vw / 750) calc(30 * 100vw / 750);
    }
    .popular_sentence dl {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* スクロールバーを非表示にする */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
    }
    .popular_sentence dl::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .popular_sentence dt {
        font-size: calc(24 * 100vw / 750);
        font-weight: bold;
        padding: calc(12 * 100vw / 750) calc(26 * 100vw / 750) calc(12 * 100vw / 750) 0 ;
        flex: 0 0 auto;
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 1;
    }
    .popular_sentence dd {
        font-size: calc(24 * 100vw / 750);
        border: 1px solid #D9D9D9;
        border-radius: calc(50 * 100vw / 750);
        flex: 0 0 auto;
        margin-right: calc(12 * 100vw / 750);
    }
    .popular_sentence dd a {
        display: block;
        text-decoration: none;
        padding: calc(12 * 100vw / 750) calc(26 * 100vw / 750);
        color: #333 !important;
    }
}


/* 訴求バナー（spのみ）
-------------------------------------------------*/
@media screen and (max-width: 750px) {
    .appeal_bnr {
        margin: 0 calc(18 * 100vw / 750) calc(30 * 100vw / 750); 
    }
    .appeal_bnr ul {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
    }
    .appeal_bnr li {
        width:calc(333 * 100vw / 750); 
        height:calc(123 * 100vw / 750); 
    }
    .appeal_bnr li a {
        display: block;
    }
    .appeal_bnr li a img {
        width: 100%;
        height: auto;
    }   
    
}


/* カテゴリ設定
-------------------------------------------------*/
#category {
    margin-bottom: 100px;
}
#category #corporate h3,
#category #personal h3,
#category #industry h3,
#category .original_text h3,
#category .original_img h3,
#category #situation_area h3 {
    background-color: #f0f0f0;
    color: #1C2F61;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 30px;
    padding: 16px 16px 14px 16px;    
}
@media screen and (max-width: 750px) {
    #category {
        margin: 0 calc(18 * 100vw / 750) calc(96 * 100vw / 750);
    }
    .cat_menu {
        margin-bottom: calc(80 * 100vw / 750);
    }
    /* 業種で選ぶ */
    #industry {
        margin-bottom: calc(80 * 100vw / 750);
    }
    #category #corporate h3,
    #category #personal h3,
    #category #industry h3,
    #category .original_text h3,
    #category .original_img h3,
    #category #situation_area h3 {
        background-color: #EEE;
        font-size: calc(32 * 100vw / 750);
        margin-bottom: calc(40 * 100vw / 750);
        padding: calc(20 * 100vw / 750) calc(25 * 100vw / 750);    
    }
}

/* カテゴリリンクメニュー */
#category .cat_menu p {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #000;
    margin-bottom: 30px;
}

#category .cat_menu ul {
    background: #1C2F61;
    border-radius: 6px;
    color: #FFF;
    font-weight: bold;
    display: flex;
}

#category .cat_menu li a {
    display: block;
    width: 239px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background: #1C2F61;
    position: relative;
    box-sizing: border-box;
}
@media screen and (max-width: 750px) {
    #category .cat_menu p {
        font-size: calc(36 * 100vw / 750);
        margin-bottom: calc(50 * 100vw / 750);
    }
    #category .cat_menu ul {
        background: none;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: calc(28 * 100vw / 750);
    }
    #category .cat_menu li a {
        display: block;
        width: calc(333 * 100vw / 750);
        height: calc(64 * 100vw / 750);
        line-height: calc(64 * 100vw / 750);
        font-size: calc(26 * 100vw / 750);
        
        /*text-align: center;
        text-decoration: none;*/
        color: #1C2F61;
        background: none;
        border:1px solid #1C2F61;
        position: relative;
        box-sizing: border-box;
        border-radius: 50px;
    }
}

#category .cat_menu li:last-child a {
    padding-right: 20px;
}
#category .cat_menu li:first-child a {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#category .cat_menu li:last-child a {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
@media screen and (max-width: 750px) {
    #category .cat_menu li:first-child a {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    
    #category .cat_menu li:last-child a {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }
}

@media (hover: hover) and (pointer: fine) {
    #category .cat_menu li a:hover {
        background: #003;
    } 
}
#category .cat_menu li a::before,
#category .cat_menu li a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    content: "";
    vertical-align: middle;
}

#category .cat_menu li a::before {
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #FFF;
}

#category .cat_menu li a::after {
    top: -2px;
    right: 15px;
    width: 4px;
    height: 4px;
    border-top: 2px solid #1C2F61;
    border-right: 2px solid #1C2F61;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
@media screen and (max-width: 750px) {
    #category .cat_menu li a:hover {
        background: none;
    }
    #category .cat_menu li a::before,
    #category .cat_menu li a::after {
        /*position: absolute;*/
        top: 0;
        bottom: 0;
        right: 0;
        margin: 0;
        /*content: "";*/
        /*vertical-align: middle;*/
    }

    #category .cat_menu li a::before {
        width: 0;
        height: 0;
        /*-webkit-border-radius: 50%;
        border-radius: 50%;
        background: #FFF;*/
    }

    #category .cat_menu li a::after {
        top: calc(20 * 100vw / 750);
        right: calc(22 * 100vw / 750);
        width: calc(12 * 100vw / 750);
        height: calc(12 * 100vw / 750);
        border-top: calc(4 * 100vw / 750) solid #1C2F61;
        border-right: calc(4 * 100vw / 750) solid #1C2F61;
        /*-webkit-transform: rotate(135deg);
        transform: rotate(135deg);*/
    }
}


#category .category_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 40px;
}

#category .category_list.-large {
    justify-content: space-between;
    gap: initial;
}
@media screen and (max-width: 750px) {
    #category .category_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: calc(28 * 100vw / 750) 0;
        margin-bottom: calc(80 * 100vw / 750);
    }    
}

/* カテゴリーバナー */
#category .category_item {
    width: 270px;
    height: 70px;
    border-radius: 6px;
    transition-duration: 0.3s;
    margin-bottom: 28px;
}

/*#category #personal ul.category_list::after {
    content: "";
    display: block;
    width: 270px;
}*/

#category .category_item.long {
    width: 373px;
    height: 88px;
}

#category .category_item a {
    display: block;
    color: #333;
    text-decoration: none;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    box-sizing: border-box;
    border-radius: 6px;
}

#category .category_item p.description {
    margin-top: 20px;
    font-size: 15px;
}
@media screen and (max-width: 750px) {
    #category #industry .category_item,
    #category #industry .category_item.long,
    #category #original .category_item,
    #category #original .category_item.long {
        width: auto;
        height: auto;
        border-radius: calc(8 * 100vw / 750);
        /*transition-duration: 0.3s;*/
        margin-bottom: 0;
    }
    #category .category_item,
    #category .category_item.long {
        width: calc(333 * 100vw / 750);
        height: calc(154 * 100vw / 750);
        border-radius: calc(8 * 100vw / 750);
        margin: 0;
    }

    #category #personal ul.category_list::after {
        /*content: "";
        display: block;*/
        width: auto;
    }

    /*#category .category_item.long {
        width: auto;
        height: auto;
    }*/
    #category .category_item p.description {
        margin-top: calc(36 * 100vw / 750);
        font-size: calc(28 * 100vw / 750);
    }
}



/* オリジナル文章・デザイン
-------------------------------------------------*/
#original {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 64px;
    margin-bottom: 164px;
}
.original_text {
    width: 792px;
}
.original_img {
    width: 384px;
}
.original_text h3,
.original_img h3 {
    margin: 0 0 30px!important;
}
.orig
#original ul.category_list {
    margin-bottom: 98px;
}
@media screen and (max-width: 750px) {
    #original {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
    }
    .original_text,
    .original_img {
        width: auto;
        margin: 0;
    }
    .original_text h3,
    .original_img h3 {
        font-size: calc(32 * 100vw / 750) !important;
        margin: 0 0 calc(40 * 100vw / 750) !important;
    }
    .original_text .item_original {
        margin-bottom: calc(54 * 100vw / 750) !important;
    }
    /*.original_img {
        width: 384px;
    } */   
    
}







#category .category_flex {
    position: relative;
    display: flex;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition-duration: 0.3s;
}

#category .category_item.long .category_flex {
    height: 88px;
}
@media (hover: hover) and (pointer: fine) {
    #category .category_flex:hover {
        border: 3px solid #1C2F61;
        box-sizing: border-box;
        border-radius: 6px;
    }
}
@media screen and (max-width: 750px) {
    /* 業種で選ぶ */
    #category #industry .category_flex {
        justify-content: center;
        align-items: end;
    }
    #category #industry .category_item.long .category_flex {
        width: calc(214 * 100vw / 750);
        height: calc(232 * 100vw / 750);
    }
    
    #category .category_flex {
        height: calc(154 * 100vw / 750);
        border: calc(3 * 100vw / 750) solid transparent;
    }
    #category .category_item.long .category_flex {
        height: calc(154 * 100vw / 750);
    }
    /*#category .category_flex:hover {
        border: calc(3 * 100vw / 750) solid #FFF;
        border-radius: calc(8 * 100vw / 750);
    }*/
}



/* 個人用アイコン */
/* ボタン（大） */
li.item_tenkin {
    background: url(../img/category/ico_tenkin-l.png) no-repeat 0 0;
}
li.item_taishoku {
    background: url(../img/category/ico_taishoku-l.png) no-repeat 0 0;
}
@media screen and (max-width: 750px) {
    li.item_tenkin,
    li.item_taishoku {
        background-size: contain !important;
    }    
    li.item_tenkin {
        background: url(/sp/images/top/category/ico_tenkin_s.webp) no-repeat 0 0;
    }
    li.item_taishoku {
        background: url(/sp/images/top/category/ico_taishoku_s.webp) no-repeat 0 0;
    }
}

/* ボタン（通常） */
li.item_shunin {
    background: url(../img/category/ico_shunin-l.png) no-repeat 0 0;
}
li.item_tenshok {
    background: url(../img/category/ico_tenshok.png) no-repeat 0 0;
}
li.item_ttaishoku {
    background: url(../img/category/ico_ttaishoku.png) no-repeat 0 0;
}
li.item_shukko {
    background: url(../img/category/ico_shukko.png) no-repeat 0 0;
}
li.item_hikkoshi {
    background: url(../img/category/ico_hikkoshi.png) no-repeat 0 0;
}
li.item_butsuji {
    background: url(../img/category/ico_butsuji.png) no-repeat 0 0;
}
li.item_shochu {
    background: url(../img/category/ico_shochu.png) no-repeat 0 0;
}
li.item_sonota {
    background: url(../img/category/ico_sonota.png) no-repeat 0 0;
}
@media screen and (max-width: 750px) {
    li.item_shunin,
    li.item_tenshok,
    li.item_ttaishoku,
    li.item_shukko,
    li.item_hikkoshi,
    li.item_butsuji,
    li.item_shochu,
    li.item_sonota {
        background-size: contain !important;
    }
    li.item_shunin {
        background: url(/sp/images/top/category/ico_shunin_s.webp) no-repeat 0 0;
    }
    li.item_tenshok {
        background: url(/sp/images/top/category/ico_tenshok_s.webp) no-repeat 0 0;
    }
    li.item_ttaishoku {
        background: url(/sp/images/top/category/ico_ttaishoku_s.webp) no-repeat 0 0;
    }
    li.item_shukko {
        background: url(/sp/images/top/category/ico_shukko_s.webp) no-repeat 0 0;
    }
    li.item_hikkoshi {
        background: url(/sp/images/top/category/ico_hikkoshi_s.webp) no-repeat 0 0;
    }
    li.item_butsuji {
        background: url(/sp/images/top/category/ico_butsuji_s.webp) no-repeat 0 0;
    }
    li.item_shochu {
        background: url(/sp/images/top/category/ico_shochu_s.webp) no-repeat 0 0;
    }
    li.item_sonota {
        background: url(/sp/images/top/category/ico_sonota_s.webp) no-repeat 0 0;
    }
}

/* 法人用アイコン */
/* ボタン（大） */
li.item_skotai {
    background: url(../img/category/ico_skotai-l.png) no-repeat 0 0;
}
li.item_jiten {
    background: url(../img/category/ico_jiten-l.png) no-repeat 0 0;
}
@media screen and (max-width: 750px) {
    li.item_skotai,
    li.item_jiten {
        background-size: contain !important;
    }
    li.item_skotai {
        background: url(/sp/images/top/category/ico_skotai_s.webp) no-repeat 0 0;
    }
    li.item_jiten {
        background: url(/sp/images/top/category/ico_jiten_s.webp) no-repeat 0 0;
    }
}

/* ボタン（通常） */
li.item_doku {
    background: url(../img/category/ico_doku-l.png) no-repeat 0 0;
}
li.item_shenko {
    background: url(../img/category/ico_shenko.png) no-repeat 0 0;
}
li.item_skaisetsu {
    background: url(../img/category/ico_skaisetsu.png) no-repeat 0 0;
}
li.item_ykaisen {
    background: url(../img/category/ico_ykaisen.png) no-repeat 0 0;
}
li.item_soshiki {
    background: url(../img/category/ico_soshiki.png) no-repeat 0 0;
}
li.item_gappei {
    background: url(../img/category/ico_gappei.png) no-repeat 0 0;
}
li.item_haigyo {
    background: url(../img/category/ico_haigyo.png) no-repeat 0 0;
}
li.item_hojinnari {
    background: url(../img/category/ico_hojinnari.png) no-repeat 0 0;
}
li.item_shunen {
    background: url(../img/category/ico_shunen.png) no-repeat 0 0;
}
li.item_stopnenga {
    background: url(../img/category/ico_stopnenga.png) no-repeat 0 0;
}
@media screen and (max-width: 750px) {
    li.item_doku,
    li.item_shenko,
    li.item_skaisetsu,
    li.item_ykaisen,
    li.item_soshiki,
    li.item_gappei,
    li.item_haigyo,
    li.item_hojinnari,
    li.item_shunen,
    li.item_stopnenga,
    li.item_skotai {
        background-size: contain !important;
    }
    li.item_doku {
        background: url(/sp/images/top/category/ico_doku_s.webp) no-repeat 0 0;
    }
    li.item_shenko {
        background: url(/sp/images/top/category/ico_shenko_s.webp) no-repeat 0 0;
    }
    li.item_skaisetsu {
        background: url(/sp/images/top/category/ico_skaisetsu_s.webp) no-repeat 0 0;
    }
    li.item_ykaisen {
        background: url(/sp/images/top/category/ico_ykaisen_s.webp) no-repeat 0 0;
    }
    li.item_soshiki {
        background: url(/sp/images/top/category/ico_soshiki_s.webp) no-repeat 0 0;
    }
    li.item_gappei {
        background: url(/sp/images/top/category/ico_gappei_s.webp) no-repeat 0 0;
    }
    li.item_haigyo {
        background: url(/sp/images/top/category/ico_haigyo_s.webp) no-repeat 0 0;
    }
    li.item_hojinnari {
        background: url(/sp/images/top/category/ico_hojinnari_s.webp) no-repeat 0 0;
    }
    li.item_shunen {
        background: url(/sp/images/top/category/ico_shunen_s.webp) no-repeat 0 0;
    }
    li.item_stopnenga {
        background: url(/sp/images/top/category/ico_stopnenga_s.webp) no-repeat 0 0;
    }
}

/* 業種アイコン */
li.item_byoin {
    background: url(../img/category/ico_byoin-l.png) no-repeat 0 0;
}
li.item_gakko {
    background: url(../img/category/ico_gakko-l.png) no-repeat 0 0;
}
li.item_shigyo {
    background: url(../img/category/ico_shigyo-l.png) no-repeat 0 0;
}
@media screen and (max-width: 750px) {
    li.item_byoin,
    li.item_gakko,
    li.item_shigyo {
        background-size: contain !important;
    }
    li.item_byoin {
        background: url(/sp/images/top/category/ico_byoin_s.webp) no-repeat 0 0;
    }
    li.item_gakko {
        background: url(/sp/images/top/category/ico_gakko_s.webp) no-repeat 0 0;
    }
    li.item_shigyo {
        background: url(/sp/images/top/category/ico_shigyo_s.webp) no-repeat 0 0;
    }
}

/* 自分の文章で…アイコン */
li.item_original {
    background: url(../img/category/ico_original-l.png) no-repeat 0 0;
}
li.item_word {
    background: url(../img/category/ico_word-l.png) no-repeat 16px 12px;
}
/* 自分のデザインで…アイコン */
li.item_data {
    background: url(../img/category/ico_data-l.png) no-repeat 12px 12px;
}
@media screen and (max-width: 750px) {
    li.item_original,
    li.item_word,
    li.item_data {
        position: relative;
        background: none;
    }
    li.item_original a {
        background: url(/sp/images/top/category/ico_original_s.webp) no-repeat 0 0;
        background-size: auto 100%;
    }
    li.item_word::before {
        content: "";
        width: calc(117 * 100vw / 750);
        height: calc(122 * 100vw / 750);
        background: url(/sp/images/top/category/ico_word_s.webp) no-repeat;
        background-size: contain;
        position: absolute;
        top: calc(-15 * 100vw / 750);
        left: calc(30 * 100vw / 750);
    }
    li.item_data::before {
        content: "";
        width: calc(156 * 100vw / 750);
        height: calc(124 * 100vw / 750);
        background: url(/sp/images/top/category/ico_data_s.webp) no-repeat;
        background-size: contain;
        position: absolute;
        top: calc(-12 * 100vw / 750);
        left: calc(24 * 100vw / 750);
    }    
}
    

#category .category_flex::before,
#category .category_flex::after {
    position: absolute;
    top: 31px;
    bottom: 0;
    right: 98px;
    margin: auto;
    content: "";
    vertical-align: middle;
}

#category .category_item.long .category_flex::before,
#category .category_item.long .category_flex::after {
    top: 36px;
    right: 170px;
}

#category .category_flex::before {
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #1C2F61;
}

#category .category_item.long .category_flex::before {
    width: 14px;
    height: 14px;
}

#category .category_flex::after {
    right: 103px;
    width: 3px;
    height: 3px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#category .category_item.long .category_flex::after {
    right: 176px;
    width: 4px;
    height: 4px;
}

#category .category_body {
    padding: 0 10px 0 16px;
    line-height: 1;
}

#category .category_icon {
    width: 70px;
    text-align: center;
}

#category .category_body {
    margin-left: 70px;
    box-sizing: border-box;
}

#category .category_item.long .category_body {
    margin-left: 88px;
}


#category .category_title {
    font-size: 20px;
    font-weight: bold;
}
#category .category_item.long .category_title {
    font-size: 22px;
}

#category .category_title span {
    font-size: 16px;
}
@media screen and (max-width: 750px) {
    #category #industry .category_body {
        margin-left: 0;
        padding: 0;
    }
    #category #industry .category_item.long .category_body {
        margin-left: 0;
    }
    #category #industry .category_title {
        font-size: calc(26 * 100vw / 750);
        margin-bottom: calc(18 * 100vw / 750);
    }
    #category .category_body {
        margin-left:calc(150 * 100vw / 750);
        padding: 0;
    }
    #category .category_item.long .category_body {
        margin-left: calc(150 * 100vw / 750);
    }
    #category .category_title {
        font-size: calc(30 * 100vw / 750);
        line-height: 1.2;
    }
    #category .-nengacorporate .category_title,
    #category .-nenga .category_title,
    #category .-kanchu .category_title,
    #category .-shochu .category_title,
    #category .-mochu .category_title {
        margin-left: calc(132 * 100vw / 750);
        font-size: calc(28 * 100vw / 750);
    }
    #category .category_item.long .category_title {
        font-size: calc(30 * 100vw / 750);
    }
    #category .category_title span {
        font-size: calc(20 * 100vw / 750);
    }
}

    
#category .to-sample {
    font-size: 12px;
    margin-top: 10px;
}

#category .category_item.long .to-sample {
    font-size: 14px;
    margin-top: 14px;
}

@media screen and (max-width: 750px) {
    #category .category_item.item_original .category_flex,
    #category .category_item.item_word .category_flex,
    #category .category_item.item_data .category_flex {
        height: calc(120 * 100vw / 750);
    }
    #category .category_item.item_original .category_body,
    #category .category_item.item_word .category_body,
    #category .category_item.item_data .category_body{
        margin-left: calc(210 * 100vw / 750);
    }
    /* ボタン矢印 */
    .ico_arrow {
        position: relative;
        width: calc(36 * 100vw / 750);
        height: calc(36 * 100vw / 750);
        border-radius: 50%;
        background: #1C2F61;
        display: inline-block !important;
        top: calc(5 * 100vw / 750);
        left: calc(10 * 100vw / 750);
        
    }
    .ico_arrow::after {
        position: absolute;
        content: "";
        top: 50%;
        left: 56%;
        transform: translate(-50%, -50%);
        width: calc(12 * 100vw / 750);
        height: calc(16 * 100vw / 750);
        background-color: #FFF;
        clip-path: polygon(0 0, 0 100%, 100% 50%);
    }
    #category .category_flex::before,
    #category .category_flex::after {
        content:none;
        /*position: absolute;
        top: 31px;
        bottom: 0;
        right: 98px;
        margin: auto;
        content: "";
        vertical-align: middle;*/
    }
    /*#category .category_item.long .to-sample {
        display: none;
    }*/
    #category .category_item.item_original .category_title,
    #category .category_item.item_word .category_title,
    #category .category_item.item_data .category_title {
        font-size: calc(36 * 100vw / 750);
        font-weight: normal;
    }
}


/* 年賀サイトリンク */
#category li.item_nenga.-nengacorporate {
    background: url("../img/category/ico_nenga.png") no-repeat;
    background-position: 106% 200%;
    background-color: #D70C18;
}
#category li.item_nenga.-nenga {
    background: url("../img/category/ico_nenga.png") no-repeat;
    background-position: 106% 200%;
    background-color: #D70C18;
}
#category li.item_nenga .category_body {
    margin-left: initial;
    color: #fff;
}
#category li.item_nenga .category_flex::before {
    content: initial;
}
#category li.item_nenga .category_flex::after {
    content: "";
    background: url('/sp/common/images/ico/ico_outlink_s.webp') no-repeat 0 0 /contain;
    width: 14px;
    height: 14px;
    top: 25px;
    right: 55px;
    -webkit-transform: initial;
    transform: initial;
    border: initial;
}
@media screen and (max-width: 750px) {
#category li.item_nenga.-nengacorporate {
    background: url("/sp/images/top/category/card_nenga_s.webp") no-repeat;
    background-size: calc(110 * 100vw / 750) auto ;
    background-position: calc(14 * 100vw / 750) calc(22 * 100vw / 750) ;
    background-color: #D70C18;
}
#category li.item_nenga.-nenga {
    background: url("/sp/images/top/category/card_nenga_s.webp") no-repeat;
    background-size: calc(110 * 100vw / 750) auto ;
    background-position:  calc(14 * 100vw / 750) calc(22 * 100vw / 750) ;
    background-color: #D70C18;
}
#category li.item_nenga.-nengacorporate .category_flex::after {
    /*content: "";
    background: url('/common/img/ico_outlink_white.png') no-repeat 0 0 /contain;*/
    width: calc(20 * 100vw / 750);
    height: calc(20 * 100vw / 750);
    top: calc(32 * 100vw / 750);
    right: calc(72 * 100vw / 750);
    /*-webkit-transform: initial;
    transform: initial;
    border: initial;*/
}
#category li.item_nenga.-nenga .category_flex::after {
    /*content: "";
    background: url('/common/img/ico_outlink_white.png') no-repeat 0 0 /contain;*/
    width: calc(20 * 100vw / 750);
    height: calc(20 * 100vw / 750);
    top: calc(32 * 100vw / 750);
    right: calc(26 * 100vw / 750);
    /*-webkit-transform: initial;
    transform: initial;
    border: initial;*/
}
}

/* 年賀サイトリンク */
/*#category li.item_nenga{
    display: none;
}*/

/* 季節サイトリンク
-------------------------------------------------- */
/* 共通設定 */
#category li.item_season .category_body {
    margin-left: initial;
    color: #fff;
}
#category li.item_season .category_title {
    font-size: 16px;
}
#category li.item_season .category_flex::before {
    content: initial;
}
#category li.item_season .category_flex::after {
    content: "";
    background: url('/sp/common/images/ico/ico_outlink_s.webp') no-repeat 0 0 /contain;
    width: 14px;
    height: 14px;
    top: 25px;
    right: 46px;
    -webkit-transform: initial;
    transform: initial;
    border: initial;
}

/* 喪中サイトリンク */
#category li.item_season.-mochu {
    background: url("../img/category/ico_mochu.png") no-repeat;
    background-position: 108% 130%;
    background-size: 17%;
    background-color: #796CA4;
}

/* 寒中サイトリンク */
#category li.item_season.-kanchu {
    background: url("../img/category/ico_kanchu.png") no-repeat;
    background-position: 108% 130%;
    background-size: 17%;
    background-color: #B69569;
}

/* 暑中サイトリンク */
#category li.item_season.-shochu {
    background: url("../img/category/ico_shochucard.png") no-repeat;
    background-position: 108% 130%;
    background-size: 17%;
    background-color: #00A0E9;
}
@media screen and (max-width: 750px) {
    #category li.item_season.-mochu .category_flex::after,
    #category li.item_season.-kanchu .category_flex::after,
    #category li.item_season.-shochu .category_flex::after {
        width: calc(20 * 100vw / 750);
        height: calc(20 * 100vw / 750);
        top: calc(32 * 100vw / 750);
        right: calc(26 * 100vw / 750);
    }
    /* 喪中サイトリンク */
    #category li.item_season.-mochu {
        background: url("/sp/images/top/category/card_mochu_s.webp") no-repeat;
        background-size: calc(110 * 100vw / 750) auto ;
        background-position: calc(14 * 100vw / 750) calc(22 * 100vw / 750) ;
        background-color: #796CA4;
    }
    /* 寒中サイトリンク */
    #category li.item_season.-kanchu {
        background: url("/sp/images/top/category/card_kanchu_s.webp") no-repeat;
        background-size: calc(110 * 100vw / 750) auto ;
        background-position: calc(14 * 100vw / 750) calc(22 * 100vw / 750) ;
        background-color: #B69569;
    }
    /* 暑中サイトリンク */
    #category li.item_season.-shochu {
        background: url("/sp/images/top/category/card_shochu_s.webp") no-repeat;
        background-size: calc(110 * 100vw / 750) auto ;
        background-position: calc(14 * 100vw / 750) calc(22 * 100vw / 750) ;
        background-color: #00A0E9;
    }
    #category li.item_season .category_title {
        font-size: calc(28 * 100vw / 750);
        line-height: 1.2;
    }
}

/* OPTION START ------------------------------------------------- */
#option {
    margin-bottom: 30px;
}

#option h3 {
    margin-bottom: 10px;
}

#option .option_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
}

#option li {
    width: 50%;
    margin-bottom: 2px;
}

#option li:nth-child(n + 3) {
    margin-top: 10px;
}

#option li a {
    display: block;
    text-decoration: none;
    color: #333333;
}

#option li a:hover {
    color: #FF6600;
}

#option .option_flex {
    display: flex;
    align-items: center;
}

#option .option_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background: #003366;
    margin-right: 15px;
}

#option .option_btn p {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

#option .option_btn span {
    font-size: 13px;
    letter-spacing: -0.09em;
}

/* OPTION START ------------------------------------------------- */

/* 特集バナー　
-------------------------------------------------*/
/*.box_omoi_desiners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 64px;
}
.box_omoi_desiners a:hover img {
    opacity: .7;
}*/





/* TIE UP START ----------------------------------------------- */

#tieup {
    margin-bottom: 50px;
}

#tieup h3 {
    margin-bottom: 10px;
}

#tieup ul {
    padding-top: 12px;
}

#tieup li {
    width: 287px;
    margin-bottom: 15px;
}

#tieup dl,
#tieup dt,
#tieup dd {
    display: block;
}

#tieup a {
    text-decoration: none;
    color: #333333;
}

#tieup a:hover {
    color: #FF6600;
}

#hankoya {
    float: left;
}

#hankoya dt {
    padding-top: 46px;
}

/*#anybirth {
	float:right;
}*/
#tieup dt {
    margin-bottom: 5px;
}

/* TIE UP END ----------------------------------------------- */



/* INFO・MENTE START ----------------------------------------------- */

#info,
#main .info {
    padding: 6px;
    border: #000 solid 1px;
    font-size: 93%;
    margin-bottom: 10px;
}

#info_g,
#main .info_g {
    padding: 6px;
    border: #AAA solid 1px;
    font-size: 93%;
    margin-bottom: 20px;
}

#info_y,
#main .info_y {
    margin-bottom: 15px;
    padding: 6px;
    background: #FFF7D2;
    border: #CCC solid 1px;
    font-size: 93%;
    line-height: 1.4em;
}

#cap,
#main .cap {
    font-weight: bold;
    margin-bottom: 5px;
    border-bottom: #CCCCCC solid 1px;
}

#oshirase {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 2px 0;
    border-bottom: #CCCCCC solid 1px;
}

/* INFO・MENTE END ----------------------------------------------- */



/* サイド フローティング START ----------------------------------------------- */
#floating {
    position: fixed;
    top: 20%;
    right: 0;
    display: none;
    z-index: 100;
}

#floating .cam_amazon a {
    transition-duration: .3s;
}

#floating .cam_amazon a:hover {
    opacity: .5;
}







/* 2025年改修トップ
・2カラムから1カラムに修正　ーーーーーーーーーーーーーーーーーーーー */
#contents_r {
    width: 1200px;
}
@media screen and (max-width: 750px) {
    #contents_r {
        width: 100%;
    }
}



/* デザイン入り挨拶状 お求めの方はこちら（nenga_area）
-------------------------------------------------*/
#nenga_area {
    margin: 32px auto 40px;
	text-align: center;
}
#nenga_area a {
    transition: 0.3s ;
}
#nenga_area a:hover{
    transition: 0.3s;
    opacity: 0.7;
}
/*バナーが4つの時に表示出来るように調整かけています*/
.nenga_area_wrap {
    /*width: 930px;*/
    margin-inline: auto;
    padding:20px 43.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: #EEE;
}
.nenga_area_title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.nenga_area_bnr {
    display: flex;
    gap: 16px;
    align-items: center;
}
#nenga_area .nenga_area_bnr img {
    width: 195px;
    height: 80px;
    vertical-align: bottom;
}
#nenga_area .kanchu_area_bnr_item img{
	width: auto;
}
/* サイドメニュー用バナーを格納するためのスタイル修正 */
#nenga_area .side_box_pr {
    display: flex;
    gap: 16px;
}
.side_box_pr p {
    width: initial;
}


/* ビジネスの挨拶状は…（expert_area）
-------------------------------------------------*/
#expert_area {
    margin-bottom: 48px;
}
.expert_area_title {
    display: flex;
    align-items: center;
}
#expert_area p {
    font-size: 24px;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: #1C2F61;
}
.expert_box {
    display: flex;
    flex-flow: nowrap;
    justify-content: space-between;
    margin-top: 22px;
}

.expert_box dl {
    width: 220px;
}
.expert_box dd {
    font-size: 14px;
    text-align: justify;
    margin-top: 10px;
}
#expert_area .btn_g {
    width: auto;
    /* margin-top: 46px; */
}
#expert_area .btn_g a{
    padding: 18px 30px;
    font-size: 18px;
}
@media screen and (max-width: 750px) {
#expert_area {
    margin-bottom: calc(100 * 100vw / 750);
}
.expert_area_title {
    /*display: flex;
    align-items: center;*/
    justify-content: center;
    margin-bottom: calc(64 * 100vw / 750); 
}
#expert_area p {
    font-size: calc(34 * 100vw / 750);
    color: #333;
    text-align: center;
    margin: 0 auto calc(64 * 100vw / 750);
}
.expert_box {
    /*display: flex;*/
    flex-flow: wrap;
    justify-content: space-between;
    margin-top: 0;
    gap: calc(40 * 100vw / 750) 0;
}
.expert_box dl.expert_01 {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0 calc(32 * 100vw / 750);
}
.expert_box dl.expert_01 dt,
.expert_box dl.expert_01 dd {
    width: calc(333 * 100vw / 750);
}
.expert_box dl.expert_01 dd span {
    display: block;
    font-size: calc(30 * 100vw / 750);
    font-weight: bold;
    margin-bottom: calc(22 * 100vw / 750);
}
.expert_box dl.expert_01 dd {
    /*display: block;*/
    font-size: calc(25 * 100vw / 750);
    /*font-weight: bold;
    margin-bottom: calc(36 * 100vw / 750);*/
}
    
.expert_box dl {
    width: calc(333 * 100vw / 750);
}
.expert_box dd {
    font-size: calc(25 * 100vw / 750);
    text-align: left;
    margin-top: 0;
}
.expert_box dd.-sp {
    display: block;
    font-size: calc(26 * 100vw / 750);
    text-align: center;
    margin-top: calc(16 * 100vw / 750);
}
.expert_box img {
    width: 100%;
    height: auto;
}
#expert_area .btn_g {
    width: calc(580 * 100vw / 750);
    margin: calc(48 * 100vw / 750) calc(67 * 100vw / 750) 0;
    /* margin-top: 46px; */
}
#expert_area .btn_g a{
    padding: calc(34 * 100vw / 750) 0;
    font-size: calc(32 * 100vw / 750);
}
}


/* オプション
-------------------------------------------------*/
#option_top_area {
    box-sizing: border-box;
    margin: 0 calc(50% - 50vw);
    padding: 28px 0;
    text-align: center;
    background: #EEE;
}
@media screen and (max-width: 1200px) {
    #option_top_area{
        margin:0;
    }
}
@media screen and (max-width: 750px) {
    #option_top_area{
        margin:0;
        padding: calc(26 * 100vw / 750) 0 calc(90 * 100vw / 750);
        background: none;
    }
    .option_head {
        display: none;
    }
    .option_list .map,
    .option_list .logo,
    .option_list .add,
    .option_list .stamp,
    .option_list .betsuno {
        display: none;
    }
    .btn_sp {
        width: 100%;
    }
    .btn_sp a {
        width: 100%;
        display: block;
        padding: calc(16 * 100vw / 750) 0;
        font-size: calc(24 * 100vw / 750);
        border-radius: calc(8 * 100vw / 750);
        border: 1px solid #CECECE;
        text-decoration: none;
        color: #333 !important;
        background: linear-gradient(#ffffff, #f0f0f0);
    }
}


@media screen and (max-width: 750px) {
    /* アピールエリアコンテンツ表示順変更 */
    #main #appeal_area {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 0 calc(18 * 100vw / 750) 0;
    }
    #main #appeal_area #expert_area {
        order: 2;
    }
    #main #appeal_area #option_top_area {
        order: 1;
    }
    
}
#main #appeal_area #option_top_area .option_top_area_wrap {
    width: 1200px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    hanging-punctuation: 24px;
}
@media screen and (max-width: 750px) {
    #main #appeal_area #option_top_area .option_top_area_wrap {
        width: 100%;
        justify-content: space-between;
        flex-direction: column;
    }    
}
#main #appeal_area #option_top_area p.option_head {
    font-size: 24px;
    font-weight: bold;
    color: #1C2F61;
}
#main #appeal_area #option_top_area .option_list {
    width: 972px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

#main #appeal_area #option_top_area .option_list img {
    width: 104px;
    height: 104px;
    vertical-align: bottom;
}
@media screen and (max-width: 750px) {
    #main #appeal_area #option_top_area .option_list {
        width: auto;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: calc(27 * 100vw / 750);
    }
    #main #appeal_area #option_top_area .option_list img {
        width: calc(214 * 100vw / 750);
        height: calc(214 * 100vw / 750);
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        border-radius: calc(8 * 100vw / 750);
        /*vertical-align: bottom;*/
    }
    #main #appeal_area #option_top_area .btn_g {
        width: calc(580 * 100vw / 750);
        margin: calc(44 * 100vw / 750) auto calc(30 * 100vw / 750);
    }
}
/*.option_list li a:hover img {
    transition-duration: .3s;
}*/
/*.option_list li a:hover img {
    opacity: 0;
}*/
/*.option_list li.tokkyu {
    background: url(img/option/ico_tokkyu-on.webp) 0 0 no-repeat;
}
*/

/*#main #appeal_area #option_area .option_item:not(:first-child) {
	margin-left: 20px;
}*/
/*li.option_item img{
    border-radius: 8px;
}
li.option_item a{
    display: block;
    width:auto;
    height:auto;
    box-sizing: border-box;
    border-radius: 8px;
    border: 3px solid transparent;
    transition-duration: 0.3s;
}
li.option_item a:hover{
    border: 3px solid  #1C2F61;
}*/

/* オプションBOX（文例ページ設定） */
/*#main #landing_area #appeal_area #option_area {
    margin-top: 30px;
}
#main #landing_area #appeal_area #option_area p.option_head {
    font-size: 16px;
    margin: 0 0 8px 80px;
    text-align: left;
}
#main #landing_area #appeal_area #option_area .option_list {
	margin: 0 0 20px;
}
#main #landing_area #appeal_area #option_area p.text_choose {
    font-size: 22px;
	font-weight: bold;
    line-height: 150%;
}
#main #landing_area #appeal_area #option_area p.text_choose::after {
    content: '▼';
    font-size: 30px;
    display: block;
    margin: 0 0 20px;

}*/




/* シチュエーション別文例
-------------------------------------------------*/
#situation_area ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#situation_area ul li a {
    display: block;
    width: 270px;
    height: 70px;
    line-height: 70px;
    color: #FFF;
    background: #045884;
    font-size: 19px;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) {
    #situation_area ul li a:hover {
        color: #FFF;
        text-decoration: none;
        opacity: .7;
    }
}
/*#situation_area ul li a:hover {
    color: #FFF;
    text-decoration: none;
    opacity: .7;
}*/
@media screen and (max-width: 750px) {
    #situation_area {
        margin: 0;
    }
    #situation_area h3 {
        font-size: calc(32 * 100vw / 750) !important;
        margin: 0 0 calc(40 * 100vw / 750) !important;
    }
    #situation_area h3 span {
        font-size: calc(28 * 100vw / 750);
        position: relative;
        right: 0;
    }
    #situation_area ul {
        /*display: flex;*/
        /*flex-direction: row;*/
        flex-wrap: wrap;
        justify-content: space-between;
        gap: calc(24 * 100vw / 750) 0 ; 
    }
    #situation_area ul li a {
        /*display: block;*/
        width: calc(333 * 100vw / 750);
        height: calc(88 * 100vw / 750);
        line-height: calc(88 * 100vw / 750);
        color: #333;
        background: linear-gradient(#ffffff, #f0f0f0);
        border: 1px solid #CECECE;
        font-size: calc(26 * 100vw / 750);
        /*text-align: center;*/
        /*text-decoration: none;*/
        border-radius: calc(8 * 100vw / 750);
        /*transition: opacity .3s;*/
    }
    /*#situation_area ul li a:hover {
        pointer-events: none;
        opacity: 1;
    }*/
}


/* 注文フロー
-------------------------------------------------*/
#flow_area {
    margin-bottom: 76px;
}
#flow_area .top_text {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}
#flow_area h3 {
    font-size: 22px;
    color: #FFF;
    background: #1C2F61;
    line-height: 1;
    margin:0 0 30px;
    padding: 16px 16px 14px 16px;
}
#flow_area .middle_text {
    font-size: 16px;
    margin-bottom: 12px;
}
/* ご注文の流れ図 */
#step {
    position: relative;
    margin-bottom: 54px;
}
#step .step_list {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#step .step_list li {
	position: relative;
    width: 192px;
	height: 80px;
    line-height: 80px;
	text-align: center;
	background: linear-gradient(#ffffff, #f0f0f0);;
	box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 12%);
    
	color: #333;
    font-size: 22px;
	font-weight: bold;    
}
#step .step_list li:not(:first-child)::before {
    content: "";
    background-color: #FF9A00;
    width: 15px;
    height: 18px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    top: 38%;
    left: -19%;
}
/* ご注文の流れ図 終了 */
p.step4_text,
p.step5_text {
    position: absolute;
    top:88px;
}
p.step4_text {
    right: 268px;
}
p.step5_text {
    right: 3px;
}
@media screen and (max-width: 750px) {
    #flow_area {
        margin-bottom: calc(80 * 100vw / 750);
        padding-bottom: calc(72 * 100vw / 750);
        background: #EEE;
    }
    #flow_area .top_text {
        font-size: calc(34 * 100vw / 750);
        margin-bottom: 0;
        padding-bottom: calc(44 * 100vw / 750);
        background: #FFF;
    }
    #flow_area h3 {
        font-size: calc(36 * 100vw / 750);
        margin: 0 0 calc(40 * 100vw / 750);
        padding: calc(24 * 100vw / 750) calc(30 * 100vw / 750);
        box-sizing: border-box;
    }
    #flow_area .middle_text {
        font-size: calc(28 * 100vw / 750);
        margin: 0 calc(18 * 100vw / 750) calc(44 * 100vw / 750);
    }
    /* ご注文の流れ図 */
    #step {
        margin: 0 calc(18 * 100vw / 750) calc(64 * 100vw / 750);
    }
    #step .step_list {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: calc(50 * 100vw / 750);
    }
    #step .step_list li {
        position: relative;
        width: 100%;
        height: calc(88 * 100vw / 750);
        line-height: calc(88 * 100vw / 750);
        font-size: calc(32 * 100vw / 750);
        border-radius: calc(8 * 100vw / 750);
        background: #FFF;
        box-shadow: none;
    }
    #step .step_list li:not(:first-child)::before {
        background-color: #90C700;
        width: calc(26 * 100vw / 750);
        height: calc(40 * 100vw / 750);
        top: calc(-45 * 100vw / 750);
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    /* ご注文の流れ図 終了 */
    .step4_text,
    .step5_text {
        position: relative;
    }
    .step4_text::after,
    .step5_text::after {
        font-size: calc(20 * 100vw / 750);
        font-weight: normal;
        position: absolute;
        top: calc(66 * 100vw / 750);
        right: 0;
    }
    .step4_text::after {
        content:"※ ご注文受付の翌営業日";
    }
    .step5_text::after {
        content:"※ 校了時期により異なります";
    }
}


/* テンプレート・注文について
-------------------------------------------------*/
#order_area {
    margin-bottom: 50px;
}
#order_area .order_box {
    margin: 0 auto 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#order_area .order_box > div {
    width: 581px;
}
.order_box h4 {
    font-size: 22px;
    color: #1C2F61;
    background: #F0F0F0;
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 20px 38px;
}
#order_area .order_box > div ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#order_area .order_box > div ul li {
    width: 270px;
}
#order_area .order_box > div ul li a {
    display: block;
    width: 270px;
    height: 80px;
    line-height: 80px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    text-align: center;
    background: linear-gradient(#ffffff, #f0f0f0);
    box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 12%);
}

@media (hover: hover) and (pointer: fine) {
    #order_area .order_box > div ul li a:hover {
        color: #333;
        opacity: .7;
    }  
}
@media screen and (max-width: 750px) {
    #order_area {
        margin-bottom: calc(96 * 100vw / 750);
    }
    #order_area .order_box {
        margin: 0 calc(18 * 100vw / 750);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: calc(80 * 100vw / 750) 0;
    }
    #order_area .order_box > div {
        width: 100%;
    }
    .order_box h4 {
        font-size: calc(32 * 100vw / 750);
        font-weight: 700;
        margin-bottom: calc(40 * 100vw / 750);
        padding: calc(16 * 100vw / 750) calc(25 * 100vw / 750);
    }
    #order_area .order_box > div ul li {
        width: calc(333 * 100vw / 750);
    }
    #order_area .order_box > div ul li a {
        width: calc(333 * 100vw / 750);
        height: calc(88 * 100vw / 750);
        line-height: calc(88 * 100vw / 750);
        font-size: calc(26 * 100vw / 750);
        box-shadow: none;
        border: 1px solid #CECECE;
        border-radius: calc(8 * 100vw / 750);
    }
}


/* 特集バナー
-------------------------------------------------*/
#feature_area {
    margin-bottom: 100px;
}
#feature_area ul,
#estimate_area ul {
    width: 838px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media (hover: hover) and (pointer: fine) {
    #feature_area a:hover img,
    #estimate_area a:hover img {
        opacity: .7;
    }
}
@media screen and (max-width: 750px) {
    #feature_area {
        margin-bottom: calc(96 * 100vw / 750);
    }
    #feature_area ul,
    #estimate_area ul {
        width: auto;
        margin: 0 calc(18 * 100vw / 750);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /*gap: calc(24 * 100vw / 750) 0;*/
    }
    #feature_area li,
    #estimate_area li {
        width: calc(333 * 100vw / 750);
        line-height: 0;
    }
    #feature_area li img,
    #estimate_area li img {
        width: 100%;
        height: auto;
        /*border-radius: calc(8 * 100vw / 750);*/
        line-height: 0;
    }
}


/* 見積もり
-------------------------------------------------*/
#estimate_area {
    margin-bottom: 24px;
}
#estimate_area .estimate_title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

@media screen and (max-width: 750px) {
    #estimate_area {
        margin-bottom: calc(60 * 100vw / 750);
    }
    #estimate_area .estimate_title {
        font-size: calc(34 * 100vw / 750);
        margin-bottom: calc(40 * 100vw / 750);
    }
    #estimate_area .estimate_text {
        font-size: calc(19 * 100vw / 750);
        text-align: center;
        line-height: 1;
        letter-spacing: 0;
        margin-bottom: calc(12 * 100vw / 750);
    }
}





/* 更新情報　
-------------------------------------------------*/
#wnew_cvr {
    margin-bottom: 90px;
}
#wnew_cvr h3 {
    font-size: 22px;
    color: #FFF;
    background:#1C2F61;
    line-height: 1;
    margin:10px 0 30px;
    padding: 16px 16px 14px 16px;
}
#wnew {
    width: 1000px;
    height: 126px;
    overflow: auto;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 14px;
    scrollbar-base-color: #ffffff;
    scrollbar-face-color: #ffffff;
    scrollbar-arrow-color: #CCCCCC;
    scrollbar-shadow-color: #CCCCCC;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-highlight-color: #CCCCCC;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-track-color: #ffffff;
}
#wnew div {
    position: relative;
}
#wnew dl {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
#wnew dt {
    min-width: 100px;
    margin-right: 10px;
    text-align: center;
    float: left;
}
#wnew dd {
    width: 100%;
}
@media screen and (max-width: 750px) {
    #wnew_cvr {
        margin-bottom: calc(80 * 100vw / 750);
    }
    #wnew_cvr h3 {
        font-size: calc(36 * 100vw / 750);
        margin: 0 0 calc(40 * 100vw / 750);
        padding: calc(24 * 100vw / 750) calc(30 * 100vw / 750);
        box-sizing: border-box;
    }
    #wnew {
        width: auto;
        height: calc(310 * 100vw / 750);
        padding: 0 calc(18 * 100vw / 750);
        font-size: calc(20 * 100vw / 750);
    }
    #wnew dt {
        min-width: auto;
        margin-right: 0;
        text-align: left;
        float: none;
    }
}

/* 共通　
-------------------------------------------------*/
.btn_g {
    width: 400px;
    margin: auto;
}
.btn_g a {
    font-family: "Noto Sans JP", sans-serif;
    position: relative;
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background-color: #23af3c;
    transition: opacity .3s;
    line-height: 0;
}
.btn_g-arrow {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    right: -6px;
}
.btn_g-arrow::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 11px;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 10px;
    background-color: #23af3c;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

@media (hover: hover) and (pointer: fine) {
    .btn_g a:hover {
        color: #FFF !important;
        opacity: .7;
    }
}
@media screen and (max-width: 750px) {
     .btn_g {
        width: auto;
        margin: calc(18 * 100vw / 750);
    }   
    .btn_g a {
        /*font-family: "Noto Sans JP", sans-serif;
        position: relative;*/
        padding: calc(36 * 100vw / 750) 0;
        font-size: calc(32 * 100vw / 750);
        /*font-weight: bold;*/
        /*letter-spacing: 0.05em;
        text-decoration: none;*/
        border-radius: calc(60 * 100vw / 750);
        /*display: flex;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        background-color: #23af3c;
        transition: opacity .3s;
        line-height: 0;*/
    }
    
    
}