@charset "UTF-8";

/* --------------------------------
 * base
 * -------------------------------- */

:root {
    --main-btn-color: #A4C8F5;
    --sub-btn-color: #F5D1A4;        
    --alert-btn-color: #F5A4F0;
}


html {
    /* font-size: 62.5%; */
  font-size: 70%;    
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  line-height: 1;
  background-color: #fff;
  color: #333;
  font-size: 1.4rem;
  /* font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  padding-top: 60px;
}  

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

a {
  text-decoration: none;
}

a:hover {
  opacity: .7;
}


/* --------------------------------
 * レイアウト・コンテナ
 * -------------------------------- */
.layout {
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  margin: 0 10px;
  position: relative;
}

@media (min-width: 768px) {
  .container {
    margin: 0 40px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 960px;
    margin: 0 auto;
  }
}


/* --------------------------------
 *　ユーティリティ
 * -------------------------------- */
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.ml-4 {
  margin-left: 1.5rem !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mr-4 {
  margin-right: 1.5rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}


/* --------------------------------
 * navtop style
 * -------------------------------- */
#navtop {
    background: #fae8d2;
    box-shadow: 4px 6px 12px rgba(0,0,0,0.4)
}

.navbar-nav > .active > a{
    border-radius: 6px;
    background: linear-gradient(145deg, #ffe7ca, #f5d7b2);
    box-shadow: 4px 4px 8px gray;        
    /* box-shadow:  4px 4px 8px #ddc1a0, */
    /* 		 -4px -4px 8px #f7e5cc; */
}

#navtop .nav-item {
    margin : auto 4px;
}

#navtop a {
    
    padding-left:12px;
    padding-right:12px;
}

#dropdownUser1{
    color: rgba(0,0,0,.55);
}

/* --------------------------------
 * ボタン
 * -------------------------------- */
.Mybtn, a.Mybtn {
  font-size: 1.4rem;
  color: gray;
  -webkit-appearance: none;
  padding: 4px 16px;
  line-height: 1.3;
  border-radius: 4px;
  border: solid 1px #ccc;
  background-color: #fff;
  vertical-align: bottom;
  /* font-family: "Ubuntu", "Noto Sans JP", sans-serif; */
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.Mybtn:hover, a.Mybtn:hover {
  opacity: 0.5;
}

.btn-login, a.btn-login {
  font-size: 1.2rem;    
  border: solid 1px rgb(113,80,4);
  color: rgb(113,80,4);
}


.btn-info, .btn-info:focus {
    border: solid 1px var(--main-btn-color);
    background-color: var(--main-btn-color);
}

.btn-info:hover {
    border: solid 1px var(--main-btn-color);
    background-color: #fff;
    color: var(--main-btn-color);
    /* opacity: 0.5; */
}


.btn-update, a.btn-update {
  font-size: 1.2rem;    
  border: solid 1px var(--main-btn-color);
  color: var(--main-btn-color);
}

.btn-update:hover, a.btn-update:hover {
    border: solid 1px var(--main-btn-color);        
    background-color: var(--main-btn-color);
}

.btn-danger, a.btn-danger {    
  font-size: 1.2rem;        
  border: solid 1px var(--alert-btn-color);
  color: var(--alert-btn-color);
}

.btn-danger:hover, a.btn-danger:hover {
    border: solid 1px var(--alert-btn-color);        
    background-color: var(--alert-btn-color);
}

/* --------------------------------
 * 一覧ページのボタン部分
 * -------------------------------- */

/*通常は横並び*/
.manage-btn-area {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.delete-btn-area {
  margin-left: 5px;
}

/*760px以下は縦並び*/
@media (max-width: 760px) {
  .manage-btn-area {
    flex-direction: column;
  }

  .delete-btn-area {
    margin-left: 0px;
    margin-top: 5px;
  }
}

/* --------------------------------
 * フォーム
 * -------------------------------- */
.form {
  font-size: 1.4rem;
  padding: 3px 6px;
  box-sizing: border-box;
  border-radius: 4px;
  border: solid 1px #ccc;
  /* background-color: #fff; */
  background-color: #f2f2f2;    
  /* font-family: "Ubuntu", "Noto Sans JP", sans-serif; */
}

.form:focus {
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--main-btn-color);
}



/* --------------------------------
 * アラートメッセージ
 * -------------------------------- */
.alert {
  position: relative;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  line-height: 1.3;
}

.alert-btn-close {
  font-size: 2rem;
  color: #888;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.5625rem 1.5rem;
  border: None;
  background-color: inherit;
  cursor: pointer;
}

.alert-btn-close:hover {
  opacity: 0.5;
}

.alert-success {
  color: #006e2c;
  background-color: #ccf1db;
  border-color: #b3e9c9
}

.is-hidden {
  display: none;
}