@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
/* 産業医用css */

@font-face {
    font-family: 'NotoSansJP-SemiBold';
    src: url('/fonts/NotoSansJP-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* body */
.jumbotron {
    min-height: 100vh;/* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative;/* ←相対位置 */
    padding-bottom: 80px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
    background-color: #fbfbfb !important;
     /* フォントカラー */
    color:#4d5156;
    font-family: 'NotoSansJP-SemiBold', sans-serif;
    letter-spacing: 0.05em;/* 文字間設定 */
}

/* header */
#customer_header_box {
    border-top: 7px solid #28acaf !important;
}

.titleText{
    color: #28acaf;
    font-family: 'NotoSansJP-SemiBold', sans-serif;
    font-size:2.4rem;
}
.titleText:hover{
    color: #28acaf;
    font-family: 'NotoSansJP-SemiBold', sans-serif;
}

/* ログイン画面のメインコンテンツ*/
.screen_box{
    background-color: #f5f5f5;
}

/* ナビゲーションバーの押されてない場所の色 */
#navigator_box li.nav-item {
    border-color: #a11b1e;
}

/* ナビゲーションバーの押されている場所 */
#navigator_box li.nav-item.active, #navigator_box li.nav-item:hover, #navigator_box li.nav-item:active {
    opacity: 0.5;
}

#navigator_box li.nav-item {
    transition: .3s;
}

#navigator_box li.nav-item > a.nav-link{
    /* フォントカラー */
    color: #4d5156;
}

.underline_green{
    border-bottom: solid 3px #28acaf;
}


/* ナビバーリンクの反応範囲の拡張 */
a.nav_click_range{
    display: inline-block;
    width:100%;
    height:100%;
    margin:0;
}

/* footer */
footer.footer {
    position: absolute;
    bottom: 0;
    line-height: 35px;
    margin-top: 50px;
}
.border{
    background-color: #fafafa;
}

.h1ForCustomerScreen{
    font-size: calc(1.375rem + 1.5vw);
}
.h2ForCustomerScreen{
    font-size: calc(1.35rem + .9vw);
}
.h3ForCustomerScreen{
    font-size: calc(1.3rem + .6vw);
}
.h4ForCustomerScreen{
    font-size: calc(1.275rem + .3vw);
}
.h5ForCustomerScreen{
    font-size: 1.25rem;
}
.h6ForCustomerScreen{
    font-size: 1rem;
}
.textForCustomerScreen{
    font-size: 0.8rem;
    margin-bottom: 10px;
}
.explanationForCustomerScreen{
    font-size: 1.25rem;
}

.frame_bgColor{
    background-color: #dee2e621;
}

input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
    display: none;
}
input[type="checkbox"] ~ label {
    display: block;
    position: relative;
    padding-left: 25px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    margin-top: 0px;
/*        font: 0.9rem/20px 'Open Sans', Arial, serif;*/
    font: 1rem 'NotoSansJP-SemiBold', sans-serif;
    color: #4d5156;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="checkbox"] ~ label:last-child {
    margin-bottom: 0;
    padding: 0 20px 0 40px;
}

input[type="checkbox"] ~ label:last-child::before {
    content: '';
    display: block;
    /*チェックボックスの大きさ*/
    width: 20px;
    height: 20px;
    /*チェックボックスの線の太さと色*/
    border: 3px solid #28acafc2;
    position: absolute;
    left: 0;
    top: 0.15rem;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

.list input[type="checkbox"] ~ label:last-child::before {
    top: 0;
}

.form-base-color{
    background-color: #dee2e621;
}

input[type="checkbox"]:checked ~ label:last-child::before {
    width: 12px;
    top: -3px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*以下ラジオボタンのデザイン*/
/*radios styles*/

input[type="radio"]{
    position: absolute;
    opacity: 0;
    z-index: -1;
    display: none;
}
input[type="radio"] + label:last-child {
    margin-bottom: 0;
    padding: 0 0 0 40px;
}

input[type="radio"]:checked + label {
    font-weight: bold;
}

input[type="radio"] + label {
    display: block;
    position: relative;
    color: #4d5156;
    padding-left: 25px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    margin-top: 0;
/*        font: 0.9rem/20px 'Open Sans', Arial, serif;*/
    font: 1rem 'NotoSansJP-SemiBold', sans-serif;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="radio"] + label:before {
    content: '';
    background: #f4f4f4;
    border-radius: 100%;
    border: 2px solid #28acafc2;
    display: block;
    width: 1.2em;
    height: 1.2em;
/*       width: 1.4em;
    height: 1.4em;*/
    top: 0.01rem;
    left: 0;
    text-align: center;
    cursor: pointer;
    position: absolute;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;

}

input[type="radio"]:checked + label:before {
    background-color: #28acaf;
    box-shadow: inset 0 0 0 4px #f4f4f4;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/**/


.otherInput{
    margin-top: 0.1px !important;
    -webkit-appearance: none;
}

.alcoholSelectBox{
    font-size: 100%;
    width: 30%;
}

.sleepSelectBox{
    font-size: 100%;
    width: 30%;
}
.thinOutTheText{
    opacity: 0.5;
}


input[type="number"] {
    width: 10%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.explanationBorder{
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 3px #28acaf;
    border-bottom: solid 3px #28acafa3;
}

.explanationBorder:before,.explanationBorder:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2.5px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #dee2e6;
}

.explanationBorder:before{left: 5px;}
.explanationBorder:after{right: 5px;}

.btn-font-size{
    font-size: 1.25rem !important;
}

.intentionConfirmation{
    margin-top: 0 !important;
}


.report{
    text-align: center;
    color: #0dcaf0;
    margin-left: 200px;
}

.item {
   float: left;
}

.sex{
    margin-left:7rem;
    margin-top: 0.5rem;
}

.itemPosition{
    margin-top: 0.5rem;
}

.radioPosition{
    margin-left: 2rem;
    margin-top: 0.5rem;
}

.reportTitle{
    font-weight:bold;
    font-size: 45px;
}

.age{
    float: left;
    margin-left: 1rem;
    /*width:70% !important;*/
}
/*面談報告書作成画面ストレスチェック点数入力*/
.checkCause{
    float: left;
    margin-left: 2rem;
}

.checkSubjective{
    float: left;
    margin-left: 1rem;
    margin-top: 0.5!important;
}

.checkSupport{
    float: left;
    margin-left: 3rem;
    margin-top: 0.5!important;
}

.workTime{
    margin-top: 0.7rem;
}

/*面談者の概要を横並びにする*/
.userParallel{
    display: flex;
}

/*面談者名*/
.interviewName{
    display: flex;
    padding-left: 2rem;
}

.interviewUserName{
    margin-left: 1rem;
    padding-top: 0.5rem;
}

/*枠に対する上下のマージン*/
.frameTop{
    padding-top: 0.5rem;
}

/*面談者の年齢の位置調整*/
.ageValance{
    padding-top: 0.5rem;
    padding-left: 2rem;
}
.agePosition{
    padding-top: 0.5rem;
    padding-right: 2rem;
}

/*疲労蓄積の状況*/
.accumulation{
    margin-top: 0.5rem;
    margin-left: 1rem;
}

.firstBtn{
    margin-left: 1rem;
}

.secondBtn{
    margin-left: 2rem;
}

.accumulationValue{
    margin-left: 0.5rem;
}

/*心理的な負担の状況(ストレス要因)*/
.stressCause{
    display: flex;
    width: 100%;
}

.titleA{
    margin-left: 2rem!important;
    margin-top: 0.6rem;
}

.detailA{
    padding-top:0.6rem;
    padding-left: 5rem;
}

.point{
    margin-left:4rem;
    margin-top: 0.6rem;
}

/*心理的な負担の状況(心身の自覚状況)*/
.titleB{
    margin-left: 2rem!important;
    margin-top: 1rem!important;
}

.detailB{
    padding-left: 13.8rem;
    padding-top: 1rem;
}

.pointB{
    margin-left:19rem;
    margin-top: -1.5rem;
}

/*周囲の支援*/
.titleC{
    margin-left: 2rem!important;
    margin-top: 0.9rem!important;
}

.detailC{
    padding-left: 3rem;
    padding-top: 1rem;
}

.pointC{
    margin-left: 4rem;
    margin-top: 1rem!important;
}

/*医学的所見に関する特記事*/
.overview{
    padding-right: 0.5rem;
}

.findingsTitle{
    float: left;
    margin-left: 0rem;
    margin-top: 0.5rem;
}

.findingsArea{
    width:100%;
    height: 100px;
}

/*その他の心身の状況*/
.situationTitle{
    margin-top: 0.4rem;
}

.situation{
    margin-left: 2rem;
    margin-top: 0.5rem;
}

.SituationYes{
    margin-left: 1rem;
}

.situationArea{
    display: flex; width:30%;
    margin-left: 11rem;
    margin-top: -1.7rem;
}

/*面接医師判定*/
.judgementTitle{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-left: 1rem;
}
/*本人への指導区分*/
.division{
    text-align: center;
}

.judgementSide{
    margin-left: 0.5rem;
}
/*措置不要*/
.NoActionRequired{
    width: 100%;
}
/*要健康指導*/
.insuranceGuidance{
    width: 100%;
    margin-top: 0.3rem;
}
/*要経過観察*/
.observation{
    width: 100%;
    margin-top: 0.3rem;
}
/*再面接*/
.reInterview{
    width: 100%;
    display: flex;
    height: 17%;
    margin-top: 0.3rem;
}
/*再面接日程*/
.reInterview-date{
    margin-left: 0.5rem;
}
/*治療継続*/
.continueTreatment{
    width: 100%;
    margin-top: 0.3rem;
}
/*その他の特記記事*/
.Notices{
    padding-right: 7rem;
}

.NoticesTitle{
    float: left;
    margin-left: 0rem;
    margin-top: 0rem;
}

.NoticesArea{
    width:125%;
    height: 100px;
}
/*就業上の措置に係る意見書*/
.writtenOpinion{
    width:200%;
    margin-top:5rem!important;
}
/*就業区分*/
.workCategory{
    margin-left: 3rem
}
.measure{
    margin-left: 1rem;
}
/*就業上の措置*/
.workTime{
    display: block;
    margin-left:1rem;
}

.saveTime{
    margin-top: 1rem;
}
/*時間外労働の制限*/
.laborRestrictions{
    margin-left: 3rem;
}

.restrictionsWrite{
    margin-top: 0.6rem;
    margin-left: 0.3rem;
}

.restrictionsDay{
    margin-top: 1rem;
    margin-left: 0.3rem;
}
/*就業時間の制限*/
.laborTime{
    margin-left: 3rem;
}

.laborDetail{
    height: 50%;
    margin-top: 0.7rem;
    margin-left: 0.3rem;
}

.dayMiddle{
    margin-top: 1rem;
    margin-left: 0.3rem;
}

/*時間外労働の禁止*/
.prohibitionLabor{
    display: flex;
    margin-left: 11.8rem;
}

.outLabor{
    margin-left: 3rem;
}
/*その他*/
.otherLabor{
    display: flex;
    margin-left: 11.8rem;
}

.otherArea{
    width:100%;
    height: 100px;
}

.primaryPurpose{
    margin-top: 2rem;
}

.primaryPurposeDetail{
    margin-left: 1rem;
}
/*具体例*/
.ConcreteExample{
    display: flex;
    margin-left: 13.8rem;
}

.exampleText{
    width:70%;
    height: 50px;
    margin-left: 0.3rem;
}

/*措置期間*/
.periodAction{
    margin-top: 0.5rem;
    padding-left: 5rem;
}

.periodActionTitle{
    display: block
    padding-left: 5rem;
}

.periodTime{
    margin-top: 0.4rem;
    padding-left: 8rem;
}

.ActionTime{
    height: 50%;
    margin-top: 0.7rem;
    margin-left: 0.3rem;
}
/*職場環境の改善に関する意見・医療機関への受診配慮等・その他*/
.entryField{
    display: flex;
    margin-left: 0rem;
}

.entryArea{
    width:100%;
    height: 100px;
}

/*産業医の情報*/
.affiliation{
    margin-top:0.4rem;
    margin-left:1rem;
}

.doctorDetail{
    margin-top:0.4rem;
}

.name{
    margin-top:0.4rem;
    margin-left: 2rem;
}

.createDay{
    display: flex;
    margin-right: 0rem;
}

.createDetail{
    margin-top:0.4rem;
    margin-left:1rem;　
    display: flex;
}


/*ボタンのレイアウト*/
.btn-fontSize{
    font-size: 18px;
}

.button-glow {
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
  border-radius: 10px;
  margin: 0 10px; /* 光る部分を空けるための余白 */
  padding: 0.5em 2em;
  line-height: 1.5;
  color: #fff;
  font-weight: bold;
  border: 1px solid #fff;
  background: linear-gradient(#77a2ff, #447fff); /*　青 */
}
.button-glow:hover {
  animation: 0.3s glow linear infinite alternate;
}
.button-glow:active, .button-glow:focus {
  background: #447fff;
}
.button-glow.color2 {
  background: linear-gradient(#07bfed, #07bfed); /* 緑 */
}
.button-glow.color2:active, .button-glow.color2:focus {
  background: #64c832;
}
.button-glow.color3 {
  background: linear-gradient(#ffb0bd, #ff7d93); /* ピンク */
  box-shadow: 0 0 10px 3px rgba(255, 125, 147, 0.5);
}
.button-glow.color3:active, .button-glow.color3:focus {
  background: #ff7d93;
}
.button-glow.color4 {
  background: linear-gradient(#ff7e55, #ff5722); /* オレンジ */
}
.button-glow.color4:active, .button-glow.color4:focus {
  background: #ff5722;
}
.button-glow.color5 {
  background: linear-gradient(#ff0e9c, #da0080); /* 赤 */
  box-shadow: 0 0 10px 3px rgba(218, 0, 128, 0.5);
}
.button-glow.color6 {
  background: linear-gradient(#808080, #808080); /* グレー */
}
.button-glow.color5:active, .button-glow.color5:focus {
  background: #da0080;
}