@charset "utf-8";

html{
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 100%;
}
html * {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    /*  font-family: "Helvetica Neue", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, Meiryo, sans-serif;*/
     /* font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';*/
}

@media (max-width: 450px) {
    html{
        font-size: 90%;
    }
}
@media (max-width: 360px) {
    html{
        font-size: 80%;
    }
}

body{
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 140%;
    font-size:1rem;
    background: #fff;
    text-align: left;
    color: #000;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

body a {
    color: #000;
    text-decoration: none;
    outline: none;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
body a:hover,
body a:active {
}
body a img {
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    backface-visibility: hidden;
}
button:focus {
    outline: none;
}
p {
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    line-height:180%;
}

@media screen and (min-width: 1200px){
    .container {max-width:1000px;}
}

.dnone{
    display: none;
}
.dblock{
    display: block;
}
.diblock{
    display: inline-block;
}

h1,h2,h3,h4,h5,h6{
    color:#000;
}
.nowrap{ white-space: nowrap;}

.bg-white-al9{
    background-color: rgba(255,255,255,0.9);
}
.bg-white-al8{
    background-color: rgba(255,255,255,0.8);
}
img {
    max-width:100%;
}
.height10{
    height:10px;
}
.height20{
    height:20px;
}
.height30{
    height:30px;
}
.height40{
    height:40px;
}
.height50{
    height:50px;
}
.height100{
    height:100px;
}
.height150{
    height:150px;
}
.height200{
    height:200px;
}
.height250{
    height:250px;
}
.height300{
    height:300px;
}
.height350{
    height:350px;
}
.height400{
    height:400px;
}
.height450{
    height:450px;
}
.height500{
    height:500px;
}
.height550{
    height:550px;
}
.height600{
    height:600px;
}
.height650{
    height:650px;
}

.max-height50{
    max-height:50px;
}
.max-height100{
    max-height:100px;
}
.max-height150{
    max-height:150px;
}
.max-height200{
    max-height:200px;
}
.max-height250{
    max-height:250px;
}
.max-height300{
    max-height:300px;
}
.max-height350{
    max-height:350px;
}
.max-height400{
    max-height:400px;
}
.max-height450{
    max-height:450px;
}
.max-height500{
    max-height:500px;
}
.max-height550{
    max-height:550px;
}
.max-height600{
    max-height:600px;
}
.max-height650{
    max-height:650px;
}

.min-height50{
    min-height:50px;
}
.min-height100{
    min-height:100px;
}
.min-height150{
    min-height:150px;
}
.min-height200{
    min-height:200px;
}
.min-height250{
    min-height:250px;
}
.min-height300{
    min-height:300px;
}
.min-height350{
    min-height:350px;
}
.min-height400{
    min-height:400px;
}
.min-height450{
    min-height:450px;
}
.min-height500{
    min-height:500px;
}
.min-height550{
    min-height:550px;
}
.min-height600{
    min-height:600px;
}
.min-height650{
    min-height:650px;
}
.width25{
    width:25px;
}
.width50{
    width:50px;
}
.width100{
    width:100px;
}
.width150{
    width:150px;
}
.width200{
    width:200px;
}
.width250{
    width:250px;
}
.width300{
    width:300px;
}
.width350{
    width:350px;
}
.width400{
    width:400px;
}
.width450{
    width:450px;
}
.width500{
    width:500px;
}
.width550{
    width:550px;
}
.width600{
    width:600px;
}
.width650{
    width:650px;
}

.mw-25{
    max-width: 25%;
}
.mw-50{
    max-width: 50%;
}
.max-width50{
    max-width:50px;
}
.max-width100{
    max-width:100px;
}
.max-width150{
    max-width:150px;
}
.max-width200{
    max-width:200px;
}
.max-width250{
    max-width:250px;
}
.max-width300{
    max-width:300px;
}
.max-width350{
    max-width:350px;
}
.max-width400{
    max-width:400px;
}
.max-width450{
    max-width:450px;
}
.max-width500{
    max-width:500px;
}
.max-width550{
    max-width:550px;
}
.max-width600{
    max-width:600px;
}
.max-width650{
    max-width:650px;
}

.row-eq-height > [class^=col]:first-of-type {
    display: flex;
}

.row-eq-height > [class^=col]:first-of-type .black {
    flex-grow: 1;
}

.valign-middle{
    display: table-cell;
    vertical-align: middle;
}
.ft5{
    font-size:0.5rem !important;
}
.ft6{
    font-size:0.6rem !important;
}
.ft7{
    font-size:0.7rem !important;
}
.ft8{
    font-size:0.8rem !important;
}
.ft9{
    font-size:0.9rem !important;
}
.ft10{
    font-size:1.0rem !important;
}
.ft12{
    font-size:1.2rem !important;
}
.ft14{
    font-size:1.4rem !important;
}
.ft16{
    font-size:1.6rem !important;
}
.ft18{
    font-size:1.8rem !important;
}
.ft20{
    font-size:2.0rem !important;
}
.ft22{
    font-size:2.2rem !important;
}
.ft24{
    font-size:2.4rem !important;
}
.ft26{
    font-size:2.6rem !important;
}
.ft28{
    font-size:2.8rem !important;
}
.ft30{
    font-size:3.0rem !important;
}
.ft34{
    font-size:3.4rem !important;
}
.ft38{
    font-size:3.8rem !important;
}
.ft42{
    font-size:4.2rem !important;
}
.lh60{
    line-height: 60%;
}
.lh80{
    line-height: 80%;
}
.lh100{
    line-height: 100%;
}
.lh120{
    line-height: 120%;
}
.lh140{
    line-height: 140%;
}
.lh160{
    line-height: 160%;
}
.lh180{
    line-height: 180%;
}
.lh200{
    line-height: 200%;
}
.lh240{
    line-height: 240%;
}
.lh280{
    line-height: 280%;
}
.lh320{
    line-height: 320%;
}

.p-6 {
    padding: 4rem !important;
}
.pt-6,
.py-6 {
    padding-top: 4rem !important;
}
.pr-6,
.px-6 {
    padding-right: 4rem !important;
}
.pb-6,
.py-6 {
    padding-bottom: 4rem !important;
}
.pl-6,
.px-6 {
    padding-left: 4rem !important;
}


.p-7 {
    padding: 5rem !important;
}
.pt-7,
.py-7 {
    padding-top: 5rem !important;
}
.pr-7,
.px-7 {
    padding-right: 5rem !important;
}
.pb-7,
.py-7 {
    padding-bottom: 5rem !important;
}
.pl-7,
.px-7 {
    padding-left: 5rem !important;
}

.p-8 {
    padding: 6rem !important;
}
.pt-8,
.py-8 {
    padding-top: 6rem !important;
}
.pr-8,
.px-8 {
    padding-right: 6rem !important;
}
.pb-8,
.py-8 {
    padding-bottom: 6rem !important;
}
.pl-8,
.px-8 {
    padding-left: 6rem !important;
}


.m-6 {
    margin: 4rem !important;
}

.mt-6,
.my-6 {
    margin-top: 4rem !important;
}

.mr-6,
.mx-6 {
    margin-right: 4rem !important;
}

.mb-6,
.my-6 {
    margin-bottom: 4rem !important;
}

.ml-6,
.mx-6 {
    margin-left: 4rem !important;
}

.m-7 {
    margin: 5rem !important;
}

.mt-7,
.my-7 {
    margin-top: 5rem !important;
}

.mr-7,
.mx-7 {
    margin-right: 5rem !important;
}

.mb-7,
.my-7 {
    margin-bottom: 5rem !important;
}

.ml-7,
.mx-7 {
    margin-left: 5rem !important;
}

.m-8 {
    margin: 6rem !important;
}

.mt-8,
.my-8 {
    margin-top: 6rem !important;
}

.mr-8,
.mx-8 {
    margin-right: 6rem !important;
}

.mb-8,
.my-8 {
    margin-bottom: 6rem !important;
}

.ml-8,
.mx-8 {
    margin-left: 6rem !important;
}

.w-15{
    width:15%;
}
.w-30{
    width:30%;
}
.w-45{
    width:45%;
}


.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}


.rounded-3{
    border-radius: 32px !important;
}

.rounded-1{
    border-radius: 16px !important;
}
.rounded-1-l{
    border-radius: 16px 0 0 16px !important;
}
.rounded-1-r{
    border-radius: 0 16px 16px 0 !important;
}
.rounded-1-t{
    border-radius: 16px 16px 0 0 !important;
}

.rounded-2{
    border-radius: 8px !important;
}
.rounded-2-l{
    border-radius: 8px 0 0 8px !important;
}
.rounded-2-r{
    border-radius: 0 8px 8px 0 !important;
}
.rounded-2-t{
    border-radius: 8px 8px 0 0 !important;
}

.rounded-4 {
    border-radius: 0.5rem;
}
@media (min-width: 768px) {
    .rounded-sm-4 {
        border-radius: 0.5rem !important;
    }
    .rounded-sm-pill {
        border-radius: 50rem !important;
    }
}

@media (min-width: 992px) {
    .rounded-md-4 {
        border-radius: 0.5rem !important;
    }
    .rounded-md-pill {
        border-radius: 50rem !important;
    }
}

@media (min-width: 1200px) {
    .rounded-lg-4 {
        border-radius: 0.5rem !important;
    }
    .rounded-lg-pill {
        border-radius: 50rem !important;
    }
}

.bg-light-grey{
    background-color: #e6ebed;
}

.fill-white .cls-1 {
    fill: #ffffff;
}
.fill-blue .cls-1 {
    fill: #0080ff;
}


.border-2{
    border-width:2px !important;
}
.border-3{
    border-width:3px !important;
}


.maru {
    display:inline-block;
    height:50px;
    width:50px;
    border-radius:50%;
    line-height:50px;
    text-align:center;
}
.square {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    flex-flow: column;
    vertical-align: top;
}


.text-shadow-1{
    text-shadow: rgba(0,0,0,0.8)  1px 1px 4px;
}
.text-shadow-2{
    text-shadow: rgba(0,0,0,0.9)  1px 1px 9px, rgba(0,0,0,0.9)  1px 1px 9px, rgba(0,0,0,0.9)  1px 1px 9px;
}
.text-shadow-3{
    text-shadow: rgba(0,0,0,0.9)  0px 0px 5px;
}


.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-15 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
}
@media (min-width: 576px) {
    .col-sm-15 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }
}
@media (min-width: 768px) {
    .col-md-15 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }
    .col-md-offset-15 {
        margin-left: 4.3333333%;
    }
}
@media (min-width: map-get(992px)) {
    .col-lg-15 {
        width: 20%;
        flex: 0 0 20%;
        float: left;
    }
}

.text-white-recursive *{
    color:#fff;
}

.text-blue{
    color:#0e318b;
}