@charset "utf-8";

/************************************************
 * 配色
 ************************************************/
 :root {
    --primary: #007AC2;
    /*#3a9e31*/
    --secondary: #24abfc;
    --tertiary: #e5ecf9;
    --accent: #ffbb00;
    --base: #ffffff;
    --font: #222222;
    --gray: #cccccc;
    --bg-base:#f5f5f5;
    --header-inner-width:90vw;
}

body {
    --decoration-color: var(--primary);/*装飾用のカラー（メイン）*/
    --decoration-sub-color: var(--secondary);/*装飾用のカラー（サブ）*/
    --font-color: var(--font);/*文字色*/
    --anchor-color: var(--font);/*リンク文字色*/
    --hover-color: var(--primary);/*ホバー時の文字色*/
    --bg-color: var(--base);/*背景色*/
    --bd-color: var(--primary);/*ボーダー色*/
    --hover-bg-color: var(--primary);/*ホバー時の背景色*/
    --hover-bd-color: var(--primary);/*ホバー時のボーダー色*/
}

.breadCrumb{
    --bg-color:var(--bg-base);
  }
.single-php,
.archive-php{
    background: var(--bg-base);
}
footer {
    --bg-color: var(--bg-base);
}
#copyright{
    --bg-color: var(--bg-base);
}

a {
    color: var(--anchor-color);
    text-decoration: none;
}

main {
    --anchor-color: var(--primary);
    --hover-color: var(--font);
}

a:hover {
    color: var(--hover-color);
}


/************************************************
 * タイポグラフィ
 ************************************************/
/* font-size: 62.5% = 10pxにすると、後々変更するのが大変
 理由は、10px以下に出来ない為。
 */
/* サイズ
-----------------------------------------------*/
html {
    font-size: 100%;
}


body {
    --fs-xxl: 8rem;
    --fs-xl: 4rem;
    --fs-lg: 2.4rem;
    --fs-sl: 1.5rem;
    --fs-md: 1.3rem;
    --fs-sm: 0.8rem;
    --fs-xs: 0.7rem;
}
footer {
    font-size: 0.9rem;
}
h1 {
    font-size: var(--fs-xl);
    font-weight: bold;
}

h2 {
    font-size: var(--fs-lg);
    font-weight: bold;
}

h3 {
    font-size: var(--fs-sl);
    font-weight: bold;
}

h4 {
    font-size: var(--fs-md);
    font-weight: bold;
}

h5 {
    font-size: 1.1rem;
    font-weight: bold;
}


@media only screen and (max-width: 992px) {
    html {
        font-size: 95%;
    }
}

@media only screen and (max-width: 576px) {
    html {
        font-size: 90%;
    }
    body {
        --fs-xxl: 4rem;
        --fs-xl: 3rem;
        --fs-lg: 2rem;
    }
}

/* 書体
-----------------------------------------------*/
body {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
/************************************************
 * 余白
 ************************************************/
body {
    --xxl: 8rem;
    --xl: 4rem;
    --lg: 2rem;
    --md: 1.5rem;
    --sm: 1rem;
    --xs: 0.5rem;
    --side: 10vw;
}

.page-php{
    overflow:hidden;
}

.single-php .contents-main,
.archive-php .contents-main{
    padding: var(--xl) 0;
}

h1 {
    margin-top: var(--md);
    margin-bottom: var(--sm);
}

h2 {
    margin-top: var(--md);
    margin-bottom: var(--sm);
}

h3 {
    margin-top: var(--md);
    margin-bottom: var(--sm);
}

h4 {
    margin-top: var(--md);
    margin-bottom: var(--sm);
}

h5 {
    margin-top: var(--md);
    margin-bottom: var(--sm);
}

p {
    margin: 0;
    padding: var(--sm) 0;
}

.width-container {
    padding-left: var(--side);
    padding-right: var(--side);
}

.archive-list,
.li-m{
    --li-m-x:3rem;
    --li-m-y:3rem;
}

.container,
.row{
    --bs-gutter-x: 3rem;
}

@media only screen and (max-width: 576px) {
    body {
        --xxl: 6rem;
        --xl: 3rem;
        --side: 7vw;
    }
    .container,
    .row{
        --bs-gutter-x: var(--md)!important;
    }
    .archive-list,
    .li-m{
        --li-m-x:var(--md);
        --li-m-y:var(--md);
    }
}


/************************************************
 * その他
 ************************************************/
body {
    line-height: 1.6;
    --bd-width: 2px;
    --radius: 10px;
}


/************************************************
 * input
 ************************************************/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    padding:var(--xs) var(--sm);
    color: var(--font-color);
    border-radius: var(--radius);
    border: solid 1px var(--gray);
    background: #eee;
}
select:focus,
textarea:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input:focus {
    outline: solid var(--bd-width) var(--main-color);
    /*border: solid var(--bd-width) var(--main-color);*/
}