@charset "utf-8";
/* ------------------

base

------------------ */
html {
    font-size: 62.5%;
}
body,
p,
a,
h1,h2,h3,h4,h5,h6 {
    /* 文字設定 */
    font-size: 1.6rem;
    line-height: 1.75;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #222;
}

body {
    /* 背景色 */
    background-color: #fff;
}

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

button {
    cursor: pointer;
}

/* ------------------

extension

------------------ */
.font_lato { font-family: 'Lato', sans-serif;}

.fw_400 { font-weight: 400;}
.fw_500 { font-weight: 500;}
.fw_700 { font-weight: 700;}

.fs_12 { font-size: 1.2rem;}
.fs_14 { font-size: 1.4rem;}
.fs_15 { font-size: 1.5rem;}
.fs_16 { font-size: 1.6rem;}
.fs_18 { font-size: 1.8rem;}
.fs_20 { font-size: 2.0rem;}
.fs_24 { font-size: 2.4rem;}
.fs_28 { font-size: 2.8rem;}
.fs_32 { font-size: 3.2rem;}
.fs_36 { font-size: 3.6rem;}
.fs_40 { font-size: 4.0rem;}

.mb5 { margin-bottom: 5px;}
.mb10 { margin-bottom: 10px;}
.mb15 { margin-bottom: 15px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}
.mb40 { margin-bottom: 40px;}
.mb50 { margin-bottom: 50px;}
.mb60 { margin-bottom: 60px;}
.mb100 { margin-bottom: 100px;}

.mt10 { margin-top: 10px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;}
.mt50 { margin-top: 50px;}

.mr5 { margin-right: 5px;}
.mr10 { margin-right: 10px;}
.mr20 { margin-right: 20px;}
.mr40 { margin-right: 40px;}
.mr60 { margin-right: 60px;}

.ml165 {margin-left: 165px;}

.pt10 { padding-top: 10px;}
.pt20 { padding-top: 20px;}
.pt30 { padding-top: 30px;}
.pt40 { padding-top: 40px;}
.pt50 { padding-top: 50px;}

.pb10 { padding-bottom: 10px;}
.pb20 { padding-bottom: 20px;}
.pb30 { padding-bottom: 30px;}
.pb40 { padding-bottom: 40px;}
.pb50 { padding-bottom: 50px;}

.align-l { text-align: left;}
.align-c { text-align: center;}
.align-r { text-align: right;}


.flex {
    display: flex;
    justify-content: space-between;
}
.flex_start {
    display: flex;
    justify-content: flex-start;
}
.flex_end {
    display: flex;
    justify-content: flex-end;
}
.ai_center {
    align-items: center;
}
.ai_end {
    align-items: flex-end;
}
.reverse {
    flex-direction: row-reverse;
}


.red_p {
    color: red;
}

.d_block { display: block;}
.d_none { display: none;}



.po_r { position: relative;}
.po_a { position: absolute;}


.pointer { cursor: pointer;}