@charset "utf-8";


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

strong,
em {
    font-weight: bold;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 70%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    vertical-align: text-top;
    top: -.5em;
}

sub {
    vertical-align: text-bottom;
    bottom: -.25em;
}


@font-face {
    font-family: "FAsolid";
    src: url("./fa-solid-900.woff") format("woff");
}

@font-face {
    font-family: "FAregular";
    src: url("./fa-regular-400.woff") format("woff");
}

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('./slick.woff') format('woff');
}


.fMin {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}

.fGot {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.fMaru {
    font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

.fTime {
    font-family: "Times New Roman", "Times New Roman", sans-serif;
}

.noto-sans-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}



.dbl {
    display: block;
}

.dib {
    display: inline-block;
}

.din {
    display: inline;
}

.dtb {
    display: table;
}

.right,
.right p {
    text-align: right;
}

.center,
.center p {
    text-align: center;
}

.left,
.left p {
    text-align: left;
}

.under {
    text-decoration: underline;
}

.bold {
    font-weight: 700;
}

.big {
    font-size: 120%;
}

.small {
    font-size: 90%;
}

.small2 {
    font-size: 80%;
}

.small3 {
    font-size: 70%;
}

.lh14 {
    line-height: 1.4;
}

/*a[target="_blank"]::after { font-family: "FAsolid"; font-weight:900; content: "\f35d"; display: inline-block; margin:0 0 0 3px; }*/
.sns_icon a[target="_blank"]::after {
    display: none;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.img_left {
    display: block;
    float: left;
    margin: 0 30px 30px 0;
}

.img_right {
    display: block;
    float: right;
    margin: 0 0 30px 30px;
}

.img_top {
    margin-bottom: 30px;
}

.clear {
    clear: both;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.flex {
    display: flex;
    flex-flow: row wrap;
}

.flex_between {
    justify-content: space-between;
}

.flex_center {
    justify-content: center;
}

.flex_end {
    justify-content: flex-end;
}

.flex_around {
    justify-content: space-around;
}

.flex_a_st {
    align-items: flex-start;
}

.flex_a_center {
    align-items: center;
}

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

.flex_row {
    flex-direction: row-reverse;
}

.p_re {
    position: relative;
}

.indent {
    padding-left: 1em;
    text-indent: -1em;
}

.lineclamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.lineclamp3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}



:root {
    --c_main: #F97300;
    --c_sub: #FFB474;

    --c_gray: #F9F9F9;
    --c_blk: #313131;

    --c_bln: #77614E;
    --c_lbln: #F5EAE1;

    --c_red: #FF2B57;
    --c_pink: #ffa4b7;

    --c_lgren: #6CBF77;
    --c_gren: #009C38;

    --c_org: #F97300;
    --c_lorg: #FFB474;

    --c_blue: #80CEE6;
    --c_lblue: #F4F9FB;

    --c_lyel: #FCCB57;
    --c_yel: #D8A500;

    --c_line: #b7b7b7;

    --c_tur: #5BCFC7;
    --c_tblue: #007B73;


    --br10: 10px;
    --br20: 20px;
    --br30: 30px;

}

/*基本スタイル
==================================================================================================================*/
/*基本文字サイズ&文字色*/
html {
    font-size: 16px;
}

body {
    font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .1em;
    word-wrap: break-word;
}

.content {
    color: var(--c_bln);
    background: #fff;
}

.front_page .content {
    padding-top: 100px;
}



/*
.wf-active body {
  font-family: "Noto Sans JP", 'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','メイリオ', Meiryo, sans-serif;
}
*/
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
}

h1,
h2,
h3,
h4 {
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1em;
    font-weight: 900;
}



h2 .en {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.2;
}



p {
    margin: 0px 0px 1.25em 0px;
}

/*下部に余白*/


p,
dl dt,
dl dd,
li,
div {
    font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem)
}


/*リンク文字色*/
a {
    text-decoration: none;
    color: #77614E;
    transition: all 0.6s ease 0s;
}

a:hover {
    opacity: 0.8;
}



/*マーカー＆強調文字色*/
.c_mrk {
    background-color: #e5d89b;
    padding: 0 3px;
}

/*ラインマーカー*/
.c_posi {
    color: #d64a5a;
}

/*positive*/
.c_point {
    color: #900000;
}

/*point up*/
.c_nega {
    color: #5488a2;
}

/*negative*/
.c_off {
    color: #cac5ba;
}

/*off*/


.c_red {
    color: var(--c_red);
}

.c_pink {
    color: var(--c_pink);
}

.c_main {
    color: var(--c_main);
}

.c_sub {
    color: var(--c_sub);
}

.c_bln {
    color: var(--c_bln);
}

.c_lbln {
    color: var(--c_lbln);
}

.c_lgren {
    color: var(--c_lgren);
}

.c_gren {
    color: var(--c_gren);
}

.c_blue {
    color: var(--c_blue);
}

.c_dblue {
    color: var(--c_dblue);
}

.c_lblue {
    color: var(--c_lblue);
}

.c_lyel {
    color: var(--c_lyel);
}

.c_yel {
    color: var(--c_yel);
}

.c_org {
    color: var(--c_org);
}

.c_lorg {
    color: var(--c_lorg);
}

.c_tur {
    color: var(--c_tur);
}

.c_tblue {
    color: var(--c_tblue);
}

.c_wt {
    color: #fff;
}

.t_und_yel {
    background: linear-gradient(transparent 65%, var(--c_lyel) 35%);
    padding: 0 .125em
}




/*背景色*/

.bg_gray {
    background: var(--c_gray);
}

.bg_red {
    background: var(--c_red);
}

.bg_pink {
    background: var(--c_pink);
}

.bg_bln {
    background: var(--c_bln);
}

.bg_lbln {
    background: var(--c_lbln);
}

.bg_lgren {
    background: var(--c_lgren);
}

.bg_gren {
    background: var(--c_gren);
}

.bg_blue {
    background: var(--c_blue);
}

.bg_dblue {
    background: var(--c_dblue);
}

.bg_lblue {
    background: var(--c_lblue);
}

.bg_lyel {
    background: var(--c_lyel);
}

.bg_yel {
    background: var(--c_yel);
}

.bg_org {
    background: var(--c_org);
}

.bg_lorg {
    background: var(--c_lorg);
}

.bg_tur {
    background: var(--c_tur);
}

.bg_tblue {
    background: var(--c_tblue);
}

.bg_wt {
    background: #fff;
}



.wabe_line {
    position: relative
}

.wabe_line::after {
    content: "";
    display: block;
    background-color: var(--c_red);
    mask-image: url(../images/common/wave_line.svg);
    mask-repeat: repeat-x;
    width: 100%;
    aspect-ratio: 130 / 8;
    position: absolute;
    bottom: -.75em;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
}



/*テーブル*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

caption {
    text-align: left;
    font-weight: bold;
    color: #993300;
}

th,
td {
    border: #7f9255 1px solid;
    padding: 10px 20px;
    font-size: 1rem;
    vertical-align: top;
}

thead th,
tfoot th {
    background-color: #728c42;
    color: #fff;
}

thead td,
tfoot td {
    background-color: #999;
    color: #fff;
}

tbody th {
    background-color: #a0cc3c;
    color: #fff;
}

tbody td {
    background-color: #fff;
}

/*区切り線*/
hr {
    clear: both;
    border: 0px solid #fff;
    padding: 15px 0;
    width: 0;
}

hr.br {
    border: none;
}

.img_frame {
    border: solid 4px #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

/*レイアウト共通*/
#container {
    width: 100%;
    overflow: hidden;
}

.inner {
    width: 94vw;
    max-width: 1200px;
    margin: 0 auto;
}

.main_inner {
    width: 94vw;
    max-width: 1200px;
    margin: 0 auto;
}

.inner:after {
    content: "";
    display: block;
    clear: both;
}

.inner_section {
    width: 94vw;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0;
}

.inner_wide {
    width: 94vw;
    max-width: 1800px;
    margin: 0 auto;
    padding: 60px 0;
}

.w80 {
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.w90 {
    width: 100%;
    max-width: 900px;
    margin: auto;
}

.w100 {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.w130 {
    width: 100%;
    max-width: 1300px;
    margin: auto;
}

.w160 {
    width: 100%;
    max-width: 1600px;
    margin: auto;
}

.inner.w80,
.inner.w100,
.inner_section.w80,
.inner_section.w100 {
    width: 92vw
}

.full_w {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.flex>.img_area,
.flex>.txt_area {
    width: 46%
}

.flex>.img_area img {
    border-radius: 50%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 12;
}


section .box_common,
section .box_type01 {
    border-radius: var(--br30);
    padding: 2.5em 3em;
}


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


.m_at {
    margin: auto;
}

section .txt {
    font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
    text-align: center;
    line-height: 2.4;
}


.tit_circle {
    position: relative;
}

.tit_circle::before {
    content: "";
    background: #fff;
    width: .25em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    top: -.25em;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
}

.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}


.contents_btm01 {
    margin-bottom: 20px;
}

.contents_btm02 {
    margin-bottom: 40px;
}

.contents_btm03 {
    margin-bottom: 60px;
}

.contents_btm04 {
    margin-bottom: 80px;
}

.contents_btm05 {
    margin-bottom: 100px;
}

.contents_btm0 {
    margin-bottom: 0;
}

.p0 {
    padding: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.pt0 {
    padding-top: 0 !important;
}

.pb0 {
    padding-bottom: 0 !important;
}


.br10 {
    border-radius: var(--br10);
}

.br20 {
    border-radius: var(--br20);
}

.br30 {
    border-radius: var(--br30);
}



@media (max-width:999px) {
    body {
        letter-spacing: 0.1em;
    }
}


@media (max-width:799px) {


    .front_page .content {
        padding-top: 80px;
    }

    .inner_section,
    .inner,
    .inner_wide {
        width: 92vw;
    }

    .inner_section,
    .inner_wide,
    .pd80 {
        padding: 8vw 0;
    }

    .contents_btm01 {
        margin-bottom: 4vw;
    }

    .contents_btm02 {
        margin-bottom: 6vw;
    }

    .contents_btm03 {
        margin-bottom: 8vw;
    }

    .contents_btm04 {
        margin-bottom: 10vw;
    }

    .contents_btm05 {
        margin-bottom: 14vw;
    }

    section .txt {
        text-align: left;
        line-height: 1.8;
    }

    .nobr {
        display: none;
    }

    .flex>.img_area,
    .flex>.txt_area {
        width: 100%
    }

    .flex>.img_area {
        max-width: 540px;
        margin: auto
    }

    .flex>.img_area:has(+ .txt_area),
    .flex>.txt_area:has(+ .img_area) {
        margin-bottom: 1.5em
    }


    section .box_common,
    section .box_type01 {
        padding: 1.75em 2em;
    }


}




@media all and (min-width: 600px) {
    .noPC {
        display: none !important;
    }
}

@media all and (max-width: 599.999px) {
    .noSP {
        display: none !important;
    }
}

@media (max-width:599px) {
    body {
        line-height: 1.7;
    }

    .noTab,
    .noTab caption,
    .noTab thead,
    .noTab tfoot,
    .noTab tbody,
    .noTab tr,
    .noTab th,
    .noTab td {
        display: block;
        width: 100%;
    }

    .noTab tr {
        margin-top: 10px;
    }

    .img_left {
        float: none;
        margin: 10px auto;
        text-align: center;
    }

    .img_right {
        float: none;
        margin: 10px auto;
        text-align: center;
    }

    :root {
        --br10: 6px;
        --br20: 10px;
        --br30: 14px;

    }


}

@media (max-width:399px) {

    .front_page .content {
        padding-top: 60px;
    }

    section .box_common,
    section .box_type01 {
        padding: 1.125em 1.25em;
    }


}




/*ボタン矢印*/
.arrow::after {
    content: '\f105';
    font-family: 'FAsolid';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: .875em;
    transform: translateY(-50%);
}

.more {
    width: 100%;
    max-width: 360px;
    margin: 3em auto 0;
}

.more.left0 {
    margin-left: 0
}

.more a {
    display: block;
    border-radius: 10em;
    background: var(--c_main);
    padding: .75em 1.25em;
    font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: relative;
}

.bg_lyel .more a {
    background: var(--c_yel);
}

.bg_lgren .more a {
    background: var(--c_gren);
}

.bg_lorg .more a {
    background: var(--c_org);
}

.bg_blue .more a {
    background: var(--c_blue);
}

.bg_tur .more a {
    background: var(--c_tblue);
}


.more a,
.arrow {
    position: relative;
}

.more a::after,
.arrow::after {
    content: "";
    content: '\f105';
    font-family: "FAsolid";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}






/*お知らせ 共通*/
.info_list li {
    width: calc(100% / 3 - 1.5em);
}

.info_list li .thumb {
    margin-bottom: 1em;
}

.info_list li .thumb img {
    object-fit: cover;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
}

.info_list li .thumb img.noimg {
    border: 1px solid #CCCCCC;
}

.info_list li .blog_text .day {
    color: var(--c_gren);
    margin-bottom: .25em;
}

.info_list li dt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.info_list li dd {
    display: none;
}


/* ナビゲーション（ページャー） */
.postNavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3em;
}

.postNavi li {
    margin: .5em;
}

.postNavi.num_list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.25em;
    aspect-ratio: 1 / 1;
    background: var(--c_gray);
    border-radius: 50%;
}

.postNavi.num_list li.current a {
    background: var(--c_pink);
    color: #fff
}





@media (max-width: 799px) {


    .more {
        margin: 1.5em auto 0;
    }

    .more.left0 {
        margin-left: auto
    }


    .info_list li {
        width: calc(100% / 2 - 1em);
        margin: 1em 0;
    }


}


@media (max-width: 599px) {


    .info_list li {
        width: calc(100% / 2 - .5em);
    }




}




/*お問い合わせエリア*/
.sec_contact {
    margin-bottom: 4em
}

.sec_contact .flex>div {
    width: calc(100% / 2 - 1.25em);
    border-radius: var(--br20);
    padding: 2.5em 1.5em;
    text-align: center;
    position: relative;
}

.sec_contact .flex>div .icon {
    position: absolute;
    top: -2.5em;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
}

.sec_contact .flex>div .icon {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sec_contact .flex>div .icon img {
    width: 100%;
    max-width: 3em;
    height: auto;
    max-height: 3em;
}


.sec_contact .flex>div p {
    margin-bottom: .5em;
}

.sec_contact .flex>div .more {
    margin-top: 1.35em;
}


.sec_contact .tel_area .tel_num {
    font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

.sec_contact .tel_area .tel_num a {
    font-size: clamp(1.375rem, 0.739rem + 3.18vw, 3.125rem);
}

/*フッター*/
#bread {
    background: #eee;
    font-size: 80%;
    padding: 0.3em;
}

#bread li {
    display: inline-block;
}

#bread li::before {
    font-family: FAsolid;
    content: "\f105";
    font-weight: 900;
    color: red;
    display: inline-block;
    margin: .1em .5em;
}

#bread li:first-of-type::before {
    content: "\f015";
    margin: .1em .5em .1em 0;
}

#bread a {
    color: green;
}




footer {
    padding: 2.5em 0 1em;
    position: relative;
}


footer::before {
    content: "";
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    height: 50px;

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 50'%3E%3Cpath d='M -550.4 56 Q -390.4 56 -230.4 28 Q 89.6 -28 409.6 28 Q 569.6 56 729.6 56 Q 889.6 56 1049.6 28 Q 1369.6 -28 1689.6 28 Q 1849.6 56 2009.6 56 L 1280 100 L 0 100 Z' fill='%23f5eae1'/%3E%3C/svg%3E") no-repeat center / cover;
}


footer .f_nav {
    width: 50%;
    gap: .5em .75em
}

footer .foot_link {
    width: 44%;
}

footer .f_nav li {
    position: relative;
    padding-left: 1.5em;
}

footer .f_nav li::before {
    font-family: "FAsolid";
    font-weight: 900;
    content: "\f138";
    color: #77614E;
    display: inline-block;
    margin: 0 0 0 3px;
    position: absolute;
    top: 55%;
    left: 0;
    transform: translateY(-50%);
}


footer .foot_link {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75em;
}

footer .foot_link li a {
    display: block;
    padding: .75em .5em;
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
    background: var(--c_red);
    border-radius: var(--br10);
}

footer .foot_link .confectionary a {
    background: var(--c_red);
}

footer .foot_link .nutrition a {
    /*background: var(--c_gren);*/
    background: #00a968;
}

footer .foot_link .cooking a {
    background: var(--c_org);
}

footer .foot_link li a.arrow::after {
    right: .5em;
}




footer .copy {
    font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem);
    text-align: center;
    color: #77614E;
}





@media (max-width:1099px) and (min-width: 800px) {


    .sec_contact .tel_area .tel_num {
        font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
    }

    .sec_contact .tel_area .tel_num a {
        font-size: clamp(1.625rem, 1.443rem + 0.91vw, 2.125rem);
    }


}

@media (max-width:799px) {

    .sec_contact {
        margin-bottom: 4vw
    }

    .sec_contact .flex>div {
        width: 100%;
        padding: 3em 1em 1.5em;
    }

    .sec_contact .flex .tel_area {
        margin-bottom: 4em;
    }


    footer {
        padding: 1em 0;
    }

    footer .foot_link,
    footer .f_nav {
        width: 100%;
    }

    footer .f_nav {
        margin-bottom: 1em;
    }


}


@media (max-width: 599px) {




    .sec_contact .flex>div .icon {
        top: -2em;
    }

    .sec_contact .flex>div .icon {
        width: 4em;
        height: 4em;
    }

    .sec_contact .flex>div .icon img {
        max-width: 3em;
        max-height: 3em;
    }



    footer .f_nav li {
        width: 100%;
    }

    footer .foot_link {
        grid-template-columns: repeat(1, 1fr);
    }




}





#page_top {
    width: 54px;
    height: 54px;
    position: fixed;
    z-index: 9999;
    display: none;
    right: 55px;
    bottom: 60px;
    background: var(--c_main);
    border-radius: 50%;
}

#page_top.on {
    display: block;
}

#page_top a {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    text-decoration: none;
    text-align: center;
    color: #fff;
}

#page_top a::before {
    font-family: FAsolid;
    font-weight: 900;
    content: '\f106';
    display: block;
    font-size: 25px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
}

@media (max-width: 799px) {
    #page_top {
        width: 50px;
        height: 50px;
        right: 20px;
        bottom: 65px
    }

    #page_top a {
        width: 50px;
        height: 50px;
        line-height: 1;
    }

    #page_top a::before {
        margin-bottom: 2px;
    }
}

@media (max-width: 369px) {
    #page_top {
        right: 10px;
        bottom: 55px
    }

    #page_top,
    #page_top a {
        width: 40px;
        height: 40px;
    }

    #page_top a::before {
        margin-bottom: 0;
        height: 22px;
    }
}


.onoff {
    opacity: 0;
    transition: all 1s;
}

.onoff.on {
    opacity: 1;
}


.fadein {
    display: block;
    transition: 1s;
    /*効果時間*/
    transition-timing-function: ease;
    /*開始と完了を滑らかにする*/
    transform: translateY(50px);
    /*下から表示させる*/
    opacity: 0;
    /*不透明度*/
}

.fadein.on {
    transform: none;
    /*active時に拡大解除*/
    opacity: 1;
    /*不透明度を元に戻す*/
}



/*サブページ
-------------------------------------------------------------------------------------------------------------------*/


.page_about .sub_main {
    background: url(../images/about/about_main.jpg);
}

.page_campus .sub_main {
    background: url(../images/campus/campus_main.jpg);
}

.page_job .sub_main {
    background: url(../images/job/job_main.jpg);
}

.page_subject .sub_main {
    background: url(../images/subject/subject_main.jpg);
}

.page_qualification .sub_main {
    background: url(../images/qualification/qualification_main.jpg);
}

.page_info .sub_main {
    background: url(../images/info/info_main.jpg);
}

.page_news .sub_main {
    background: url(../images/news/news_main.jpg);
}

.page_exam .sub_main {
    background: url(../images/exam/exam_main.jpg);
}

.page_opcampus .sub_main {
    background: url(../images/opcampus/opcampus_main.jpg);
}

.page_taiken .sub_main {
    background: url(../images/taiken/taiken_main.jpg);
}

.page_movie .sub_main {
    background: url(../images/movie/movie_main.jpg);
}

.sub_page .sub_main {
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    height: 45vw;
    min-height: 200px;
    max-height: 500px;
    position: relative;
}

.sub_page .sub_main::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1280 / 30;
    background-color: #fff;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 30'%3E%3Cpath d='M 0 15 Q 16 15 32 7.5 Q 64 -7.5 96 7.5 Q 112 15 128 15 Q 144 15 160 7.5 Q 192 -7.5 224 7.5 Q 240 15 256 15 Q 272 15 288 7.5 Q 320 -7.5 352 7.5 Q 368 15 384 15 Q 400 15 416 7.5 Q 448 -7.5 480 7.5 Q 496 15 512 15 Q 528 15 544 7.5 Q 576 -7.5 608 7.5 Q 624 15 640 15 Q 656 15 672 7.5 Q 704 -7.5 736 7.5 Q 752 15 768 15 Q 784 15 800 7.5 Q 832 -7.5 864 7.5 Q 880 15 896 15 Q 912 15 928 7.5 Q 960 -7.5 992 7.5 Q 1008 15 1024 15 Q 1040 15 1056 7.5 Q 1088 -7.5 1120 7.5 Q 1136 15 1152 15 Q 1168 15 1184 7.5 Q 1216 -7.5 1248 7.5 Q 1264 15 1280 15 L 1280 30 L 0 30 Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.sub_page .sub_main::after {
    content: "";
    background: rgba(0, 0, 0, .35);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.sub_page .sub_main h1 {
    position: relative;
    z-index: 3;
    font-size: clamp(1.875rem, 1.466rem + 2.05vw, 3rem);
    color: #fff;
    margin-bottom: 0;
}


.sub_page .sub_main h1 .jp {
    display: block;
    padding: .25em 1em;
    border-radius: .25em;
    background: var(--c_main);
    width: fit-content;
    font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
    color: #fff;
    text-align: center;
    margin: .5em auto 0;
}


h2 {
    font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
}

h3 {
    font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
}


.sh1 {
    font-size: clamp(1.5rem, 1.045rem + 2.27vw, 2.75rem);
    margin-bottom: 1.5em;
    position: relative
}

.sh1::after {
    content: "";
    display: block;
    background-color: var(--c_main);
    mask-image: url(../images/common/wave_line.svg);
    mask-size: cover;
    width: 70%;
    max-width: 130px;
    aspect-ratio: 130 / 8;
    position: absolute;
    bottom: -.35em;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
}



.sh2 {
    font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
    margin-bottom: 1.25em;
    color: var(--c_main);
}

.sh3 {
    font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
    margin-bottom: .75em;
}


.mt {
    margin-top: 50px;
}

/******************/
.fix_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}

.fix_btn_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.fix_btn_list li {
    width: 49%;
    text-align: center;
}

.fix_btn_list li a {
    background-color: #58a8ee;
    display: inline-block;
    width: 100%;
    color: #fff;
    padding: 7px 0;
    border: solid 1px #fff;
    white-space: nowrap;
}

.fix_btn_list li:nth-child(2) a {
    background-color: #ed3c20;
}

.fix_btn_list li.sns { display: none;}

/*600px以上*/
@media (min-width: 600px) {}

/*900px以上*/
@media (min-width: 900px) {
    .fix_btn {
        bottom: unset;
        left: unset;
        top: 100px;
        right: 10px;
        z-index: 9999;
        width: auto;
        writing-mode: vertical-rl;
    }

    .fix_btn_list {
        gap: .8em;
    }

    .fix_btn_list li {
        width: fit-content;
        text-align: center;
        margin: 0 4px;
    }

    .fix_btn_list li a {
        padding: 1em .5em;
        border-radius: 2em;
    }

    .fix_btn_list li.sns {
        display: block;
        width: 2.8em;
    }

    .fix_btn_list li.sns a {
        padding: 0;
        background: none;
        border-radius: 0;
        border: none;
    }

    .fix_btn_list li.sns a img {
        width: 100%;
        height: auto;
    }
}
/******************/