@charset "UTF-8";
/*
Theme Name: Addflow Blog Site
Description: Addflowブログサイト
Version: 1.2.0
Author: Addflowブログサイト
*/

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

    html,
    body,
    div,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video,
    .form_contact input {
        font-size: 16px;
        letter-spacing: 1.28px;
    }
}

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

    html,
    body,
    div,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video,
    .form_contact input {
        font-size: 14px;
    }
}

section h2.underline {
    position: relative;
    margin: 0 auto 70px;
    text-align: center;
}

section h2.underline:after {
    content: "";
    background: #000;
    height: 3px;
    width: 100px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width:1441px) {
    section .content {
        max-width: 1100px;
        margin: 0 auto;
        padding: 175px 0 175px;
    }

    section.contact .content {
        padding: 75px 0 175px;
    }
}

@media screen and (min-width:768px) and (max-width:1440px) {
    section .content {
        max-width: 1100px;
        margin: 0 auto;
        padding: 175px 20px 175px;
    }

    section.contact .content {
        padding: 75px 20px 175px;
    }
}

@media screen and (max-width:767px) {
    section .content {
        margin: 0 auto;
        padding: 56px 20px;
    }
}

@media screen and (min-width:768px) {
    section h2 {
        margin-bottom: 100px;
    }
}

@media screen and (max-width:767px) {
    section h2 {
        margin-bottom: 40px;
    }
}

img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

img.center {
    display: block;
    margin: 0 auto;
    text-align: center;
}

body {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

body.home {
    background: #ffdf74;
}

body.overflow__hidden {
    height: 100%;
    overflow: hidden;
}

/* Layout */
.txt_left {
    text-align: left;
}

.txt_center {
    text-align: center;
}

.txt_right {
    text-align: right;
}

.left {
    margin-left: 0;
    margin-right: auto;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.right {
    margin-left: auto;
    margin-right: 0;
}

.items_center {
    align-items: center;
}

.items_end {
    align-items: flex-end;
}

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

    .pcnone,
    #nav_content li.pcnone {
        display: none;
    }
}

@media screen and (max-width:767px) {
    .spnone {
        display: none;
    }
}

/* column */
@media screen and (min-width:768px) {
    .two_col {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

@media screen and (max-width:767px) {
    .two_col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px 0;
    }
}

/* header */
@media screen and (min-width:1500px) {
    header .header_box {
        width: calc(100% - 26px);
        padding: 0 0 0 26px;
        margin: 0 auto;
        height: 80px;
    }

    header .header_box.scrollon {
        height: 70px;
    }

    .header_nav nav .nav_right ul li {
        display: inline-block;
        text-align: center;
        display: flex;
        text-align: center;
        flex-wrap: nowrap;
        align-items: center;
        height: 80px;
        margin-right: 20px;
    }
}

@media screen and (min-width:1300px) and (max-width:1499px) {
    header .header_box {
        width: calc(100% - 10px);
        padding: 0 0 0 10px;
        margin: 0 auto;
        height: 80px;
    }

    header .header_box.scrollon {
        height: 70px;
    }
}

@media screen and (min-width:1200px) and (max-width:1299px) {
    header .header_box {
        width: calc(100% - 10px);
        padding: 0 0 0 10px;
        margin: 0 auto;
        height: 60px;
    }

    header .header_box.scrollon {
        height: 50px;
    }

    .header_nav nav .nav_left {
        width: 140px;
    }
}

@media screen and (min-width:1200px) {
    header {
        height: 80px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0);
        position: fixed;
        top: 0;
        z-index: 10;
    }

    header .header_box div.logo {
        max-width: 180px;
        height: auto;
    }

    header .header_box .header_nav,
    header .header_box .header_nav nav {
        height: 100%;
    }

    .header_nav nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .header_nav nav .nav_left {
        text-align: left;
    }

    .header_nav nav .nav_left ul li {
        display: inline-block;
        margin-right: 100px;
    }

    .header_nav nav .nav_left ul li:last-child {
        margin-right: 0;
    }

    .nav_middle {
        margin: 0 auto;
        text-align: center;
    }

    .header_nav nav .nav_right {
        text-align: right;
    }

    .header_nav nav .nav_right ul li:last-child {
        margin-right: 0;
    }

    header .sp_header_logo {
        display: none;
    }

    main {
        margin-top: 80px;
        overflow-x: hidden;
    }
}

main.toppage-main {
    overflow-x: visible;
}

@media screen and (max-width:1199px) {
    header.top {
        height: auto;
    }

    header .header_box>div.logo {
        width: 170px;
        height: auto;
    }

    header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        width: calc(100% - 20px);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .overflow__hidden header {
        background-color: #FFEDE8;
        transition: all 0s;
    }

    .header_box .header_nav .logo {
        width: 130px;
    }

    header .sp_header_logo {
        width: 110px;
    }

    header .header_box.scrollon .sp_header_logo {
        width: 100px;
    }

    header.top {
        height: auto;
    }

    main {
        margin-top: 60px;
        overflow-x: hidden;
    }

    .header_box {
        height: 60px;
        display: flex;
        align-items: center;
    }

    .header_box.scrollon {
        position: fixed;
        top: 0;
        width: 100%;
        padding: 0 10px;
        left: 0;
        height: 55px;
        background-color: #fff;
    }

    header .header_box.scrollon .sp_header_logo {
        margin-left: 10px;
    }
}

.header_box>div nav ul li a {
    vertical-align: middle;
    text-align: center;
    color: #fff;
    text-align: center;
}

.header_box {
    transition: all .4s ease-out;
}

.header_box.scrollon>div nav ul li a {
    color: #000;
}

.header_box div a img.scroll_after {
    display: none;
}

.header_box.scrollon div a img.scroll_after,
.fix_top a:hover img.scroll_after,
.fix_top a img.scroll_before,
.footer_contact .footer_mail a img.scroll_before,
.footer_contact .footer_mail a:hover img.scroll_after {
    display: block;
}

.header_box.scrollon div a img.scroll_before,
.fix_top a:hover img.scroll_before,
.fix_top a img.scroll_after,
.footer_contact .footer_mail a img.scroll_after,
.footer_contact .footer_mail a:hover img.scroll_before {
    display: none;
}

.footer_contact .footer_mail a:hover,
.fix_top a:hover {
    opacity: 1;
}

.header_box.scrollon .header_nav nav .nav_right ul {
    border-bottom: none;
}

.nav_unshown {
    display: none;
}

/* footer */
footer {
    position: relative;
    padding: 70px 0;
}

footer .copyright p {
    text-align: center;
    color: #929292;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1.28px;
}

/* TOP */
@media screen and (max-width:767px) {
    .blog_title {
        display: block;
        margin-top: 0px;
    }

    section.blog ul li {
        padding: 0;
    }
}

/* Blog */
@media screen and (min-width:1200px) {
    div.imagelink a:after {
        content: "";
        background-image: url("./images/icon_link.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 65px;
        height: 65px;
        position: absolute;
        bottom: 6.6%;
        right: 6.6%;
        z-index: 1;
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    div.imagelink a:after {
        content: "";
        background-image: url("./images/icon_link.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 30px;
        position: absolute;
        bottom: 3%;
        right: 3%;
        z-index: 1;
    }
}

@media screen and (min-width:768px) {
    .blog_section .two_col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 70px;
    }

    section.blog_section .content {
        max-width: initial;
        margin: 0 auto;
        width: 90%;
        padding: 145px 0 100px;
    }

    .toppage-main section.blog_section .content {
        padding: 100px 0 100px;
        max-width: 1440px;
    }

    section.blog_section {
        background-position: center 60px;
    }
}

@media screen and (max-width:767px) {
    .blog_section .two_col {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px 0;
    }

    section.blog_section .content {
        max-width: initial;
        margin: 0 auto;
        width: 90%;
        padding: 50px 20px 100px;
    }

    section.blog_section {
        background-position: center 110px;
    }

    div.imagelink a:after {
        content: "";
        background-image: url("./images/icon_link.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 30px;
        height: 30px;
        position: absolute;
        bottom: 3.3%;
        right: 3.3%;
        z-index: 1;
    }
}

section.blog_section {
    background-image: url("./images/blogtitle_bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
}

div.imagelink {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 5px solid #000;
}

div.imagelink a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

div.imagelink a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .3s;
}

div.imagelink a:hover img {
    transform: scale(1.1);
}

p.link_title span {
    display: block;
    color: #fff;
    line-height: 1;
    letter-spacing: 1.92px;
    margin-top: 10px;
}

@media screen and (min-width:1200px) {
    .blog_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px 30px;
        width: 100%;
    }

    p.link_title {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-align: center;
        width: 100%;
        line-height: 1.3;
        letter-spacing: 5.12px;
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    .blog_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin: 100px auto 0;
        width: 100%;
    }

    p.link_title {
        position: absolute;
        z-index: 1;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
        color: #fff;
        text-align: center;
        width: 100%;
        line-height: 1.3;
        letter-spacing: 5.12px;
    }
}

@media screen and (min-width:768px) {
    section.blog .content {
        padding-bottom: 150px;
    }

    .blog_list>.blog_box {
        position: relative;
    }

    .blog_box .blog_info {
        width: 100%;
        padding: 15px 0 0;
    }

    .sub_top .blog_list {
        margin: 80px auto 120px;
    }

    .blog_detail .single_content {
        margin: 80px auto 0;
        padding-bottom: 80px;
    }

    .single_page_link {
        margin: 100px auto 0;
    }

    .single_page_link {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        align-items: center;
        gap: 0 30px;
    }

    ul.page-numbers {
        width: 100%;
        margin: 100px auto 0;
        text-align: center;
    }

    .single_page_link .prev_single {
        text-align: right;
    }

    .single_page_link .next_single {
        text-align: left;
    }

    .blog_slider .blog_box {
        margin: 0 30px;
    }

    ul.page-numbers li .page-numbers.current {
        font-size: 1.25rem;
        font-weight: 700;
        width: 45px;
        height: 45px;
        display: block;
        line-height: 45px;
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
    }

    ul.page-numbers li a {
        font-size: 1.25rem;
        font-weight: 700;
        width: 45px;
        height: 45px;
        display: block;
        line-height: 45px;
        background-color: #fff;
        border: 1px solid #000;
        color: #000;
    }
}

@media screen and (max-width:767px) {
    section.blog .content {
        padding-bottom: 80px;
    }

    p.link_title {
        position: absolute;
        z-index: 1;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        text-align: center;
        width: 100%;
        line-height: 1.3;
        letter-spacing: 5.12px;
    }

    .blog_list {
        margin: 100px auto 0;
    }

    .blog_list>.blog_box {
        height: auto;
        position: relative;
    }

    .blog_list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px 0;
        margin: 0 auto 0;
        width: 100%;
        padding-top: 20px;
    }

    .blog_box .blog_info {
        width: 100%;
        padding: 15px 0;
    }

    .sub_top .blog_list {
        margin: 40px auto 60px;
    }

    .single_page_link {
        margin: 50px auto 0;
    }

    .single_page_link {
        display: grid;
        grid-template-columns: .6fr 1fr .6fr;
        justify-content: space-between;
        align-items: center;
    }

    .blog_detail .single_content {
        margin: 40px auto 0;
        padding-bottom: 40px;
    }

    ul.page-numbers {
        width: 100%;
        margin: 50px auto 0;
        text-align: center;
    }

    .single_page_link .prev_single a.more_size,
    .single_page_link .next_single a.more_size {
        font-size: .875rem;
    }

    .single_page_link .prev_single {
        text-align: left;
    }

    .single_page_link .next_single {
        text-align: right;
    }

    .blog_slider .blog_box {
        margin: 0 15px;
    }

    ul.page-numbers li .page-numbers.current {
        font-size: 1.25rem;
        font-weight: 700;
        width: 30px;
        height: 30px;
        display: block;
        line-height: 30px;
        background-color: #000;
        border: 1px solid #000;
        color: #fff;
    }

    ul.page-numbers li a {
        font-size: 1.25rem;
        font-weight: 700;
        width: 30px;
        height: 30px;
        display: block;
        line-height: 30px;
        background-color: #fff;
        border: 1px solid #000;
        color: #000;
    }
}

section.blog .content {
    max-width: 1100px;
}

.blog_list>.blog_box a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    text-decoration: none;
}

.blog_list>.blog_box a .img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    z-index: 1;
}

.blog_list>.blog_box a .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.single_thumbnail .img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
}

.single_thumbnail .img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.blog p.date,
.blog_section p.date {
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    color: #D9D9D9;
}

.blog h2.blog_title {
    margin: 30px auto 60px;
    line-height: 1;
}

.blog_box .blog_info p.blog_title {
    font-weight: 700;
    margin: 15px auto 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.blog_box .blog_info p.blog_description {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.blog_detail {
    margin: 30px auto 0;
}

.single_page_link .prev_single a,
.single_page_link .next_single a {
    font-weight: 700;
}

.single_page_link a:hover {
    color: rgba(146, 146, 146, 1);
}

.single_page_link p.button {
    margin: 0 auto;
}

.back_singlelists {
    text-align: center;
}

.back_singlelists a {
    padding-bottom: 8px;
    border-bottom: 1px solid #000;
}

.back_singlelists a:hover {
    border-bottom: none;
}

ul.page-numbers li {
    display: inline-block;
    margin-right: 1em;
}

ul.page-numbers li:last-child {
    margin-right: 0;
}

ul.page-numbers li a:hover {
    background-color: #000;
    color: #fff;
    opacity: 1;
}

.blog_detail .single_content {
    border-bottom: 2px solid #1f1f1f;
}

.blog_detail .single_content p {
    margin-bottom: 1em;
}

ul.inner_link_list li.black a {
    background-color: #000;
    border: 1px solid #000;
}

ul.page-numbers li a.prev svg,
ul.page-numbers li a.next svg {
    height: 15px;
}

ul.page-numbers li a.prev:hover svg path,
ul.page-numbers li a.next:hover svg path {
    stroke: #fff;
}

/* button */
@media screen and (min-width:768px) {
    .button {
        margin: 100px auto 0;
    }

    .two_col_btn .button a,
    p.button.max a {
        width: 100%;
        display: block;
    }

    .single_page_link .button a {
        width: 500px;
    }

    .button a {
        background: #000;
        border: 2px solid rgba(255, 255, 255, 0);
        position: relative;
        display: inline-block;
        text-align: center;
        overflow: hidden;
        transition: text-shadow 0.3s;
        width: 500px;
        height: 85px;
        line-height: 85px;
        color: #fff;
        max-width: 100%;
    }

    .button a:hover {
        background: #fff;
        color: #000;
        border: 2px solid #000;
        opacity: 1;
    }

    .button a:hover span {
        color: #000;
    }

    .button a:after {
        transition: .3s ease;
    }

    .button a:hover:before {
        right: -100px;
    }
}

@media screen and (max-width:767px) {
    .button {
        margin: 40px auto 0;
        text-align: center;
    }

    .button a {
        background: #000;
        border: 2px solid rgba(255, 255, 255, 0);
        position: relative;
        display: inline-block;
        text-align: center;
        overflow: hidden;
        transition: text-shadow 0.3s;
        width: 100%;
        max-width: 400px;
        padding: 15px 0;
        color: #fff;
    }

    .button a:hover {
        background: #fff;
        color: #000;
        border: 2px solid #000;
        opacity: 1;
    }

    .button a:hover span {
        color: #000;
    }

    .button a:before {
        content: "";
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 17px;
        content: '';
        transition: right 0.5s ease;
    }

    .button a:after {
        content: none;
    }

    .button a:after {
        transition: .3s ease;
    }

    .button a:hover,
    p.submit_button:hover input {
        opacity: 1;
    }

    p.button.margin {
        margin: 60px auto 40px;
    }
}

p.button.right {
    margin: 40px 0 0 auto;
}

p.button.right a {
    display: block;
    margin: 0 0 0 auto;
}

@media screen and (min-width:768px) {
    .spver {
        display: none;
    }
}

@media screen and (max-width:767px) {
    .pcver {
        display: none;
    }

    .center {
        margin: auto;
    }
}