/*Googleシンボル（角丸）・アイコン（角丸・反転）*/

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL@100..700,0..1&family=BIZ+UDPGothic:wght@400;900&family=BIZ+UDPMincho:wght@400;700&family=Kiwi+Maru:wght@300;400;500&family=Kosugi+Maru&family=Sawarabi+Gothic&family=WDXL+Lubrifont+JP+N&family=Yusei+Magic&display=swap');
/*GoogleFonts読み込み
-見出し用：
＞BIZ UDPGothic(BIZ UDPGothic, sans-serif, weight:400/900)
＞BIZ UDP 明朝(BIZ UDPMincho, serif, weight:400/700)

-本文用：
＞さわらび(Sawarabi Gothic, sans-serif, weight:400)
＞Kiwiマル(Kiwi Maru, serif, weight:300/400/500)
＞小杉丸(Kosugi Maru, sans-serif, weight:400)

-ユニーク：
＞油性マジック(Yusei Magic, sans-serif, weight:400)
＞WDXL ルブリ(WDXL Lubrifont JP N, sans-serif, weight:400)
*/

.biz_G900,h1,strong{
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 900;
}
.biz_G400,h2{
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
}
.biz_M{
    font-family: "BIZ UDPMincho", serif;
}

.sawarabi,h3,h4{
    font-family: "Sawarabi Gothic", sans-serif;
}
.kiwi-m{
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
}
.kiwi-s{
    font-family: "Kiwi Maru", serif;
    font-weight: 300;
}
.kiwi-l,.btn{
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
}

.kosugi,body{
    font-family: "Kosugi Maru", sans-serif;
}

.magic{
    font-family: "Yusei Magic", sans-serif;
}
.lubri{
    font-family: "WDXL Lubrifont JP N", sans-serif;
}


.icon{
    font-family: 'Material Symbols Rounded';
    vertical-align: -0.2em;
    margin: 0 0.2em;
}
.Bicon{
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL'1;
    font-weight: 700;
    vertical-align: -0.2em;

}

/*変数定義*/
:root{
    /*font名*/
    /*content指定用*/
    --animation-fill-mode:"Material Symbols Rounded";
    --icon:"Material Symbols Rounded";
    --Bicon:'FILL' 1,'wght' 700 ;

    --main-title:"BIZ UDPGothic", sans-serif;
    --main-txt:"Kosugi Maru", sans-serif;
    --label-g:"Sawarabi Gothic", sans-serif;
    --label-s:"Kiwi Maru", serif;
    --magic:"Yusei Magic", sans-serif;
    --mincho:"BIZ UDPMincho", serif;
    --stunp:"WDXL Lubrifont JP N", sans-serif;
    --title-weight:900;
    --text-weight:400;

    /*字間調整用*/
    --sp-small:0.02em;
    --sp-middle:0.05em;
    --sp-wide:0.1em;

    /*カラーパレット*/
    --cp-y:#F0E800;
    --cp-o:#F5794D;
    --cp-b:#4900B4;
    --cp-p:#B8FBED;
    --cp-alert:orangered;
    --cp-accent:limegreen;
    --cp-txt:#240e03;

    /*枠内余白*/
    --padding:1em clamp(0.5em,calc(7%/2),7%)
}


/*---共通ベースデザイン---*/

/*ページ全体-------------------------------------------------*/


img:hover{ opacity: 1;}

html{
    color:var(--cp-txt);
    background-color: white;
    overflow-x: hidden;
    background-image: url(../image/header.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: contain;

    a{ text-decoration: none;}

}

/*--<head>と<footer>の間--*/
body{
    font-size: 1rem;
    line-height: 1.75;
    font-weight:var(--text-weight);
    margin: 0 auto;


    .link{
        display: inline-block;
        padding: 0 0.25em;
        padding-inline: 1px;
        background-image: repeating-linear-gradient(-45deg, var(--cp-y) 0 2px, transparent 2px 4px);
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 100% 0.75em;
    }
    .link:hover{
        background: linear-gradient( 0deg, var(--cp-y) 0.5em, transparent 0.5em);
        translate: 0 -3px;
    }

}


.flex{
    display: flex;
    flex-wrap: wrap;
    gap:0.2em;
    justify-items: center;
}

/* 汎用
＞文字中央揃え
＞赤文字 */
.center{
    text-align: center;
}
.red{
    color: var(--cp-alert);
}

strong{
    color: var(--cp-alert);
}

em{
    font-size: 1.5em;
    font-weight: var(--title-weight);
    font-style: normal;
}

address{
    font-style: normal;
    margin:0.5em;
    span{
        display: inline-block;
        margin: 0.5em auto;
        font-size: 1.25em;
        font-weight: var(--title-weight);
    }
    a{
        display: inline-block;
        text-decoration:underline 2px dashed var(--cp-txt);
        text-underline-offset: 0.25em;
    }
    a:hover{
        translate: 2px 2px;
    }
}

.snsicon{
    width: clamp(16px,3em,5em);
    margin:clamp(4px,0.8125em,1.25em);
}

/*パンくずリスト*/
.breadcroumb{
    background-color: lemonchiffon;
    margin: 0.5rem;
    font-size: 0.875rem;
    padding: 0 3rem;
    
    ol{
        list-style: none;

        li{
            display: inline-block;

            &::after{
                content: " \21C0 "
            }
            &:last-child::after{
                content: none;
            }
        }
    }
}


/*支援申込・問い合わせボタン*/
.btn_area{
    display: flex;
    gap:1em;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 2em auto;
}
.btn{
    margin: 0.25em;
    margin-bottom: 1em;
    padding: 0.5em 2em;
    background-color: color-mix(in srgb, var(--cp-o) , red 20%);
    color: white;
    max-width: fit-content;
    border-radius: 0.5em;
    font-size: 1.25em;

    .icon{
        font-size: 1.2em;
        margin-right: 0.25em;
    }
}
.btn:hover{
    background-color: var(--cp-o);
}


/*--メインコンテンツ記載エリア--*/
main{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    box-sizing: border-box;

    background-color: #ffffff50;
    padding: 1em clamp(0,1em,1.5em);
    backdrop-filter: blur(12px) ;

    section{
        margin: 3em auto;
    }

    hr{
        overflow:visible;
        border:var(--cp-y) 1px dashed
    }

    h1{
        font-size: 2.5rem;
        line-height: 1.25;
        font-weight: var(--title-weight);
        margin:1em 0.5rem;
        color: darkslategray;
    }

    h2{
        font-size: 2rem;
        color:var(--cp-b);
        margin: 0.5em auto;
        padding-left: 0.25em;
        border-bottom: 5px solid;
        height: 1.5em;
    }

    h3{
        font-size: 1.5em;
        background-color: color-mix(in srgb, var(--cp-accent) , var(--cp-b) 20%);
        padding: 0 0.2em;
        color: white;
    }

    

    .redframe{
        border: 3px solid var(--cp-alert);
        margin: 1em;
        padding: var(--padding);
        font-size: 1.25em;
        color: var(--cp-alert);
    }

    /*リスト
    ＞チェックリスト*/

    .check{
        font-family: var(--icon);
        font-variation-settings: var(--Bicon);
        list-style: "check_circle";
        font-size: 1.25em;


        li{
            color: var(--cp-txt);
            padding-left: 0.25em;
        }
        li::first-letter{
        color: var(--cp-accent);
        vertical-align: -0.2em;
        }
    }

}


@media (width <= 768px) {


    body{
    font-size: 0.75rem;
    max-width: 95%;
    }
}
/*
:root {
  --test-color: red;
}

.test {
  color: var(--test-color);
    font-family: "BIZ UDPMincho",serif;

}
*/