/*　-- 基本レイアウトデザイン --
・パーツごとの基本CSS。
・使用する場合は「site_style.css」にコピーして使う。
最終更新日:2023.12.11
*/


/* -----------------------------------
  ad.html
----------------------------------- */

.ad_bnr {
    width: 100%;
}

.ad_bnr a {
    display: block;
    background: #fff;
    transition: .3s;
}

.ad-bnr a:hover img {
    opacity: 0.7;
    transition: .3s;
}

.ad-bnr .ad-bn_box3 {
    display: flex;
    gap: 10px;
}


/* pcこの上に記述 */


/* ----	tablet ---- */

@media screen and (max-width: 1279px) {
    /* tabletこの上に記述 */
}


/* ---- sp ---- */

@media screen and (max-width: 767px) {
    /* spこの上に記述 */
}


/* -----------------------------------
  content.html
----------------------------------- */


/* divを使用したレイアウト */

.contents-box01 {
    width: 100%;
    max-width: 860px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

.contents-box01_ttl {
    width: 100%;
    max-width: 860px;
    font-size: 20px;
    margin: 15px 0;
}

.contents-box01_txt {
    width: 100%;
    max-width: 460px;
    line-height: 1.6;
}

.contents-box01_img {
    width: 100%;
    max-width: 360px;
}


/* dlを使用したレイアウト */

.contents-box02 {
    width: 100%;
    max-width: 860px;
    margin: auto;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}

dt.contents-box02_ttl {
    width: 100%;
    max-width: 860px;
    font-size: 24px;
    margin-bottom: 30px;
}

.contents-box02_txt {
    width: 100%;
    max-width: 460px;
    margin-top: 10px;
    line-height: 1.6;
}

.contents-box02_img {
    width: 100%;
    max-width: 360px;
}


/* flexを使用したレイアウト */

.contents-box03 {
    width: 100%;
    /* max-width: 860px; */
    margin: auto;
    margin-bottom: 30px;
}

.contents-box03 h2 {
    font-size: 24px;
    font-weight: bold;
}

.contents-box03_img {
    width: 100%;
}

.contents-box03_txt {
    width: 100%;
}

.contents-box03_link {
    display: block;
    margin: 20px 0 0 auto;
    font-size: 80%;
    text-align: right;
    font-weight: bold;
}

.contents-box03 a:hover {
    display: block;
    opacity: 0.7;
}

.contents-box03_list1,
.contents-box03_list2,
.contents-box03_list3,
.contents-box03_list4 {
    width: 100%;
    margin-bottom: 30px;
    padding: 20px;
    /* max-width: 860px; */
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    gap: 10px;
    /* 使用する場合は罫線を消す */
    border: 1px solid #333;
}


/* 1カラム */

.contents-box03_list1 {
    flex-wrap: wrap;
    gap: 20px;
}

.contents-box03_list1 li {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contents-box03_list1 .contents-box03_img {
    width: 30%;
    max-width: 120px;
    height: 30%;
    max-height: 120px;
}

.contents-box03_list1 .contents-box03_img img {
    object-fit: cover;
    width: 120px;
    height: 120px;
}

.contents-box03_list1 .contents-box03_txtbox {
    width: calc(100% - 140px);
}


/* 2カラム */

.contents-box03_list2 li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contents-box03_list2 .contents-box03_img {
    width: 45%;
}

.contents-box03_list2 .contents-box03_txtbox {
    width: 50%;
}


/* 3カラム */

.contents-box03_list3 .contents-box03_txt {
    margin-top: 10px;
}


/* -----------------------------------
  infomation.html
----------------------------------- */


/* 埋め込み型記事一覧の外枠 */

.blogcontent {
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.info-box {
    width: 100%;
    padding: 35px 40px;
    box-shadow: 4px 2px 8px #ddd inset;
    position: relative;
    margin-bottom: 30px;
    position: relative;
}


/* お知らせ */

.news_box {
    max-width: 440px;
    width: 100%;
    padding: 35px 25px;
    box-shadow: 4px 4px 8px #ddd inset;
}


/* お知らせ */

.blog_box {
    max-width: 440px;
    width: 100%;
    padding: 35px 25px;
    box-shadow: 4px 4px 8px #ddd inset;
}

.blog-top_kiji {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    text-align: left;
    margin: auto;
    font-family: 'Noto Sans JP';
    padding: 10px 0 20px;
    border-bottom: 1px dashed;
}

.blog-day {
    width: 80px;
    font-size: 1.6rem;
    font-weight: bold;
}


/* タグデザインはstyle.css */

.blog-ttl {
    width: 100%;
    text-align: left;
    padding: 5px;
}

.blog-ttl a {
    font-size: 2.0rem;
    font-weight: bold;
}

.blog-txt {
    width: 100%;
    font-size: 1.4rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
}


/* タグデザイン */

.blog-tag {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 80px;
    color: #ffffff;
    background: #252225;
    font-size: 1.4rem;
    float: left;
    padding: 0px 10px;
    margin-left: 20px;
}

.blog_top_kiji .newscontens01 {
    background: #93278F;
}

.blog_top_kiji .newscontens02 {
    background: #5f9ea0;
}

.blog-tag a {
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .blogcontent {
        padding: 80px 0 60px;
        text-align: center;
        display: block;
    }
    .news_box,
    .blog_box {
        max-width: none;
        width: 90vw;
        margin: auto;
        padding: 35px 25px;
        box-shadow: 4px 4px 8px #ddd inset;
    }
    .news_box {
        margin-bottom: 40vw;
        margin-top: 20vw;
    }
    .blog-top_kiji dt {
        width: 20vw;
        font-size: 13px;
        font-weight: bold;
    }
    .blog-top_kiji dd {
        width: 55vw;
        font-size: 12px;
    }
    .blog-top_kiji dd a:hover {
        color: #d88fac;
    }
    .blogcontent .pc_block {
        display: none;
    }
}