/*============================
共通
============================*/
h2{
    font-size: min(100vw / 375 * ( 18 + 16 ) / 2 , 18px);
    text-align:center;
    margin-top: min( 100vw / 750 * 56 , 56px);
    margin-bottom: min( 100vw / 750 * 40 , 40px);
}
article{
    padding-right:0;
    padding-left:0;
    margin-left:0;
    margin-right:0;
}


/*============================
#fv
============================*/
/* 2023/2/15 修正_fvの写真を差し替え。PCではメインタイトルを左揃えで右側に移動。 */
div.fv {
    position:relative;
    text-align:left;
    margin-bottom: min( 100vw / 750 * 56 , 56px);
}
@media screen and (max-width:750px){
    div.fv {
        position:relative;
        text-align:center;
        margin-bottom: min( 100vw / 750 * 56 , 56px);
    }
}
div.fv .fv__title{
    position: absolute;
    left:59%;
    top:50%;
    z-index:1;
    transform:translate(0%, -50%);
    /* width:100%; */
}
@media screen and (max-width:750px){
    div.fv .fv__title{
        position: absolute;
        left:50%;
        top:70%;
        z-index:1;
        transform:translate(-50%, -50%);
        width:100%;
    }
}
div.fv__title .cta__button {
    margin: 0;
}
@media screen and (max-width:750px){
    div.fv__title .cta__button {
        margin: auto;
    }
}
div.fv h1 {
    font-size: 26px;
    margin-bottom: min( 100vw / 750 * 24 , 24px);
}
div.fv figure {
    position:relative;
    z-index:0;
}
div.fv figure img {
}

/*============================
#features
============================*/
section#features.features {
    margin-bottom: min( 100vw / 750 * 32 , 32px);
}
section#features.features div.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: min( 100vw / 750 * 28 , 28px);
}

@media screen and (max-width:750px){
    section#features.features div.container {
        grid-template-columns: 1fr;
    }
}

section#features.features div.container div.features__unit {
    text-align: center;
}
section#features.features div.container div.features__unit figure {
}
section#features.features div.container div.features__unit figure img {
}
section#features.features div.container div.features__unit .unit__body{
    background-color: var(--bac-sub);
    padding: min( 100vw / 750 * 16 , 16px) min( 100vw / 750 * 24 , 24px);
}
section#features.features div.container div.features__unit .unit__body h2 {
    font-size: min(100vw / 375 * ( 16 + 16 ) / 2 , 16px);
    font-weight: bold;
    margin-bottom: min( 100vw / 750 * 8 , 8px);
    margin-top:0;
}

/*============================
#cta
============================*/
section#cta.cta {
    position:relative;
}
section#cta.cta figure.cta__back {
    width:100%;
    height: min( 100vw / 750 * 208 , 208px);
    overflow: hidden;
    position:relative;
}
section#cta.cta figure.cta__back img {
    filter: blur(3px) opacity(87%);
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    object-fit: cover;
    position:absolute;
    left: -3px;
    top:-3px;
    z-index:0;
}
section#cta.cta div.container {
}
section#cta.cta div.container div.cta__button.button {
    z-index:1;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:100%;
    max-width:296px;
}
section#cta.cta div.container div.cta__button.button a {
}

/*============================
#app
============================*/
section#app.app {
    background-color: var(--bac-accent);
    text-align:center;
    padding-bottom: min( 100vw / 750 * 40 , 40px);
}
section#app.app div.container {
}
section#app.app div.container h2 {
}
section#app.app div.container a {
    display:inline-block;
}
section#app.app div.container a figure {
    height:44px;
}
section#app.app div.container a figure img {
    height:100%;
}

/*============================
#migration
============================*/
section#migration.migration {
    padding-bottom: min( 100vw / 750 * 80 , 80px);
    padding-right: min( 100vw / 750 * 16 , 16px);
    padding-left: min( 100vw / 750 * 16 , 16px);
}
section#migration.migration h2 {
}
section#migration.migration div.container {
    display:grid;
    grid-template-columns: 620fr 499fr;
    grid-template-rows: auto 1fr auto;
    gap: min( 100vw / 750 * 40 , 40px);
}
section#migration.migration div.container figure {
    grid-row: 1 / 4;
    grid-column: 1 / 2;
}
section#migration.migration div.container figure img {
}
section#migration.migration div.container h3 {
    margin-top:0px;
    grid-column: 2 / 3;
}
section#migration.migration div.container p.migration__body {
    grid-column: 2 / 3;
}
section#migration.migration div.container a {
    grid-column: 2 / 3;
    text-align:right;
}

@media screen and (max-width:750px){
    section#migration.migration div.container {
        grid-template-columns: 1fr;
    }
    section#migration.migration div.container > *{
        grid-column:1 / 2 !important;
    }
}

/*============================
#news
============================*/
section#news.news {
    background-color: var(--bac-sub);
    padding-bottom: min( 100vw / 750 * 80 , 80px);
}
section#news.news div.container {
}
section#news.news div.container h2 {
}
section#news.news div.container div.posts__list {
}
section#news.news div.container div.posts__list ul {
}
section#news.news div.container div.posts__list ul li {
}
section#news.news div.container div.posts__list ul li a {
}
section#news.news div.container div.posts__list ul li a span.date {
}
section#news.news div.container a.archive {

}

/*============================
#404
============================*/
div#error404 {
    text-align: center;
    margin-top: 32px;
}

/*============================
2023/05/22追加
CTAボタン（アプリDLとWEB版）を修正
============================*/
.btn_service {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}
@media screen and (max-width:640px) {
    .btn_service {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px;
    }
}
.btn_service--container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
}
.btn_service--cta {
    margin: 0 1.6rem;
}
.btn_service--title {
    margin-bottom: 0.5rem;
}
.caution {
    margin: 2.4rem 1.6rem;
    font-size: 1.3rem;
    padding: 0 1.6rem;
}
.btn_service--img {
    margin: 0;
}
.cta__back {
    margin: 0;
}
.features__unit--img {
    margin: 0;
}
.app__container--title {
    margin-bottom: 2rem;
    color: var(--bac-button);
}

/* 20240414追加 */
/* サービスの特長 */
.p-service__txt--lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}
.p-service__title {
    font-size: 24px;
    line-height: 1.4;
    border-left: 8px solid #F0830E;
    padding: 2px 0 2px 10px;
}
.p-service__number {
    margin-bottom: 0;
}
.p-service__title--feature {
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 1.4;
}
.p-service__title--sub {
    font-size: 28px;
    line-height: 1.4;
    text-align: center;
    color: #F0830E;
    font-weight: 500;
}
.p-service__title--subMigration {
    margin: 0;
    background-color: #FBFAF6;
    padding: 16px;
}
@media screen and (max-width:750px) {
    .p-service__title--sub {
        font-size: 14px;
    }
}
.p-service__group {
    margin-bottom: 56px;
}
figcaption.wp-element-caption {
    text-align: center;
}
.p-service__migration {
    padding: 40px;
    background-color: #FBFAF6;
}
@media screen and (max-width:750px) {
    .p-service__migration {
        padding: 16px;
        background-color: #FBFAF6;
    }
}
.p-service__title--migration {
    font-size: 28px;
    font-weight: 500;
    color: #F0830E;
}
.p-service__img--migration {
    max-width: 369px;
    margin-bottom: 0;
}
@media screen and (max-width:750px) {
    .p-service__txt--migration {
        margin-bottom: 16px;
    }
}
.p-service__txt--migration {
    margin-bottom: 24px;
    margin-top: 16px;
}
.p-service__guide a {
    padding: 8px 16px;
    border: 1px solid #F0830E;
    border-radius: 4px;
}
.p-cta__wrapper--upper,.p-cta__wrapper--lower {
    background-color: #F0830E;
    padding: 24px;
}
.p-cta__title--upper {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
    color: #F0830E;
    background-color: #fff;
    text-align: center;
    margin-bottom: 4px;
}
@media screen and (max-width:750px) {
    .p-cta__title--upper {
        font-size: 24px;
    }
}
.p-cta__txt--upper {
    font-size: 17px;
    color: #fff;
    font-weight: 500;
    text-align: center;
}
.p-cta__txt--lower {
    font-size: 17px;
    color: #fff;
    font-weight: 500;
}
.p-cta__app--upper,.p-cta__web--upper,.p-cta__app--lower,.p-cta__web--lower {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #fff;
}
.p-cta__wrapper--lower {
    background-color: #F0830E;
    padding: 24px;
}
.p-cta__title--lower {
    font-size: 56px;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
@media screen and (max-width:750px) {
    .p-cta__title--lower {
        font-size: 40px;
        text-align: center;
        line-height: 1.2;
        font-weight: 600;
        color: #fff;
        margin-bottom: 16px;
    }
}
.wp-block-table td, .wp-block-table th {
    border-bottom: 1px solid #CCC8C4;
    padding: .8em;
}
.p-service__function--inner td {
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
}
.p-service__orange {
    background-color: #F0830E;
    color: #fff;
    font-weight: 500;
}
.p-service__gray {
    background-color: #A0A0A0;
    color: #fff;
}
.p-service__nocolor {
    background-color: rgba(255, 255, 255, 0);
}
.p-service__lightorange {
    background-color: #FFF4E7;
}
.p-service__lightgray {
    background-color: #F3F3F3;
}
/* サービスの特長 END */
/* らくらく連絡網からの移行 */
.p-migration__txt--lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 16px;
}
/* らくらく連絡網からの移行 END */

.p-mt__1x {
    margin-top: 8px;
}
.p-mt__2x {
    margin-top: 16px;
}
.p-mt__3x {
    margin-top: 24px;
}
.p-mt__4x {
    margin-top: 32px;
}
.p-mt__5x {
    margin-top: 40px;
}
.p-mt__6x {
    margin-top: 48px;
}
.p-mt__7x {
    margin-top: 56px;
}
.p-mt__8x {
    margin-top: 64px;
}
.p-mb__1x {
    margin-bottom: 8px;
}
.p-mb__2x {
    margin-bottom: 16px;
}
.p-mb__3x {
    margin-bottom: 24px;
}
.p-mb__4x {
    margin-bottom: 32px;
}
.p-mb__5x {
    margin-bottom: 40px;
}
.p-mb__6x {
    margin-bottom: 48px;
}
.p-mb__7x {
    margin-bottom: 56px;
}
.p-mb__8x {
    margin-bottom: 64px;
}