@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Oswald:wght@700&display=swap");
/*=================================================================
    base
=================================================================*/
body {
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: .05em;
    background-color: #fafafa;
    color: #444444;
}
input[type="date"] {
    appearance: none; /* ブラウザのデフォルトスタイルを無効化 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
}
.main{padding: 100px 0px 60px 0px ;}
.validation-text {font-size: 1.4rem; color: red;}
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a {text-decoration: underline; color: #003894;}
a:hover {text-decoration: none;}
p {margin: 0;}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.6;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}

/*=================================================================
    wrapper （footer下部固定）
=================================================================*/
.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
}

/*=================================================================
    utility
=================================================================*/
.view-pc {display: block;}
@media screen and (max-width: 768px) {
    .view-pc {display: none;}
}
.view-sp {display: none;}
@media screen and (max-width: 768px) {
    .view-sp {display: block;}
}

/*=================================================================
    header
=================================================================*/
.header-inner {
	position: fixed; top:0px;
    width: 100%; height: 100px;
	background: #f8f9fa; z-index: 999;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
#header-logo {
	position: fixed;
	left: 20px; top: 15px;
	width: 200px; height: 60px;
}
#header-logo a img {width: auto; height: 100%;}
.header-title {
	position: fixed;
	left: 80px; top: 10px;
    font-weight: 900; font-size: 40px;
}
#setting {
	position: fixed;
	cursor: pointer;
	right: 20px;top: 20px;
	width: 50px;height: 50px;
}
#setting a img {width: 100%;height: 100%;}

/*=================================================================
    footer
=================================================================*/
.footer {
    position:fixed; bottom: 0;
    width: 100%; height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid transparent;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.navbar{border-top: 1px solid transparent; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);}
.group-container{padding:0; height:100%;}
.selectors, .block{height:100%; width:100%;}
.selectors button{
    border: 0; border-radius: 0;
    background-color: #f8f9fa !important;
    width:25%;
    margin-left: 0;
}
.selectors button:active{border:0;}
.selectors button:focus{
    border:0; outline: 0;
    box-shadow: 0 0 0 0px;
}
.active, .selector-holder{display: flex; flex-direction: column;}
.inactive{display: none;}
.selector-holder span{font-size: 0.8rem;}
.button-active, .selectors button:hover, .selectors button:active, .selectors button:focus{color: #26BCFD;}
.button-inactive{color: #000;}
.cr{text-align: center;}

/*=================================================================
    タブレット用
=================================================================*/
@media screen and (max-width: 1200px) {
}

/*=================================================================
    スマホ用
=================================================================*/
@media screen and (max-width: 768px) {
    /* Header */
    .header-inner {
        height: 80px;
    }
    #header-logo {
        left: 10px; top: 5px;
        width: auto; height: 70px;
    }
    .header-title {
        left: 70px; top: 10px;
        font-weight: 700; font-size: 30px;
    }
    #setting {
        right: 10px;top: 20px;
        width: 40px;height: 40px;
    }
}
@media screen and (max-width: 450px) {
    /* Footer */
    .selector-holder span{font-size: 0.5rem;}
}
@media screen and (max-width: 350px) {
    /* Footer */
    .selector-holder span{font-size: 0.4rem;}
}