@charset "UTF-8";

/* =================================================================
# 基本CSS
# ================================================================= */

body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #222;
    background-color: #fff;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.catchphrase{
    font-family: "游明朝体", "Yu Mincho", serif; /* 游明朝体の指定 */
}

img{
    max-width:100%;
}


/* =================================================================
# カラー設定
# ================================================================= */
:root {
    --base-color: #f8f8f8;
    --main-color: #f9690e;
    --accent-color:#008ac8;
}

.main-bc{
    background-color:#f9690e;
}

.accent-bc{
    background-color:#008ac8;
}

/* =================================================================
# リンクの色
# ================================================================= */

a{
    transition: color 0.3s;
    color: #007bff;
    text-decoration: none; 
}

a:hover{
    text-decoration: underline;
}

/* =================================================================
#  デバイス別の基本フォントサイズ
# ================================================================= */

html {
    font-size: 16px;
}

@media (max-width: 1366px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    table th,table td {
        font-size: 15px;
    }

}

/* =================================================================
# 文字の大きさ
# ================================================================= */

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.25rem;
    }
}

p{
    font-size: 1rem;
    margin:1rem 0;
    line-height:1.8;
}


/* =================================================================
# コンテンツ幅
# ================================================================= */

.main-w{
    max-width: 1200px;
    width: 100%;
    margin:0 auto;
    box-sizing: border-box;
}

.section-pa{
    padding:3rem 5%;
}

.post-pa{
    padding:0 3%; 
}

/* =================================================================
# 余白
# ================================================================= */

.ma10-t{
    margin-top:10px;
}

.ma20-t{
    margin-top:20px;
}

.ma30-t{
    margin-top:30px;
}

.ma10-l{
    margin-left:10px;
}

.ma20-l{
    margin-left:20px;
}

.ma30-l{
    margin-left:30px;
}

.ma10-r{
    margin-right:10px;
}

.ma20-r{
    margin-right:20px;
}

.ma30-r{
    margin-right:30px;
}

.ma10-b{
    margin-bottom:10px;
}

.ma20-b{
    margin-bottom:20px;
}

.ma30-b{
    margin-bottom:30px;
}

.pa0-r{
    padding-right:0;
}

.pa10-r{
    padding-right:10px;
}

.pa20-r{
    padding-right:20px;
}


/* =================================================================
# 配置
# ================================================================= */

.text-c{
    text-align:center;
}

.text-r{
    text-align:right;
}

.text-l{
    text-align:left;
}