@charset "utf-8";
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

html {
  font-size: 14px;
}

body {
  background-color: #fafafa;
  margin: 0px;
  font-family: 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  --font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  --font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
  color: #333333;
}
.link{
	padding: 0.1em 0.3em 0em 0.3em;
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(33,150,244,1) 50%);
	background-position: 0 0;
	background-size: auto 200%;
	transition: .5s;
	color: #2196f4;
	text-decoration: none;
}
.link:hover {
	background-position: 0 100%;
	color: #fff;
}

.root {
	/* position:	relative; */
	/* top: 60px; */
	margin-top: 20px;
	min-width: 1200px;
	overflow: hidden;
}
.row {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}

.c-box {
	border-radius: 15px;
	background: rgba(255,255,255, .66);
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 20px;
	padding-right: 20px;
	-webkit-box-shadow: 0 0 7px rgba(0,0,0, .08);
			box-shadow: 0 0 7px rgba(0,0,0, .08);
}
.c-box-mini {
	border-radius: 15px;
	background: rgba(255,255,255, .66);
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	-webkit-box-shadow: 0 0 7px rgba(0,0,0, .08);
			box-shadow: 0 0 7px rgba(0,0,0, .08);
}

input{
    padding: 3px 5px; /*ボックスを大きくする*/
    border-radius: 10px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
    font-size: 14px;
    font-family: 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

input:focus {
    box-shadow: 0 0 5px 0 rgba(255,153,0,1);
    border: 2px solid #FFF !important;
    outline: 0;
}



textarea{
    padding: 3px 5px; /*ボックスを大きくする*/
    border-radius: 10px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
    font-size: 14px;
    font-family: 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
textarea:focus {
    box-shadow: 0 0 5px 0 rgba(255,153,0,1);
    border: 2px solid #FFF !important;
    outline: 0;
}


select{
    padding: 3px 15px; /*ボックスを大きくする*/
    border-radius: 10px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
    font-size: 14px;
    font-family: 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}



h1 {
  position: relative;
  padding: 1.5rem;
  text-align: center;
}

h1:before {
  position: absolute;
  bottom: 0px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #f00;
}


/* メニューバー */
.menubar {
	position:	fixed;
	top: 0px;
	background-color: #ffb6c1; 
	opacity:1.0;
	height: 80px;
	width: 100%;
	z-index:100;
	padding-left: 30px;
	background: linear-gradient(#494949, #0d0d0d);
	vertical-align: middle;
}
.logo {
	display: table-cell;
	padding-right: 100px;
}
.menu {
	color: #ffffff;
	display: table-cell;
	vertical-align: middle;
	height: 80px;
	--padding-right: 50px;
	--width: 100px;
	white-space: nowrap;
}
/* ファンクションバー */
.functionbar {
	position:	fixed;
	top: 93px;
	--background-color: #ffb6c1; 
	--background-color: #00b6c1; 
	opacity:1.0;
	height: 30px;
	right:0px;
	--width: 100%;
	z-index:100;
	padding-left: 10px;
	padding-right: 10px;
	--background: linear-gradient(#004949, #0d0d0d);
	vertical-align: middle;
}

/* ボタン */
.btn-gradient-simple {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
  transition: .4s;
}

.btn-gradient-simple:hover {
  background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}

a.btn--orange.btn--border-solid {
  border: 2px solid #b84c00;
}

.bn632-hover {
  width: 160px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 20px;
  height: 25px;
  text-align:center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.bn632-hover:hover {
  background-position: 100% 0;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.bn632-hover:focus {
  outline: none;
}

.bn632-hover.bn25 {
    background-image: linear-gradient(
      to right,
      #29323c,
      #485563,
      #2b5876,
      #4e4376
    );
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
  }


.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/* チェックボックス */
label { font-size: 16px; }
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

/* 属性 */
.num
{
	text-align: right;
}
.header
{
	font-weight: bold;
	text-align: center;
	background-color: #dadada;
	padding-left: 10px;
	padding-right: 10px;
    border-radius: 5px; /*ボックス角の丸み*/

}
.center
{
	text-align: center;
}
.left
{
	text-align: left;
}
.right
{
	text-align: right;
}
.datetime
{
	width: 130px;
	text-align: center;
	font-size: 16px;
}
.display-none
{
	display : none;
}
.nowrap{
	white-space: nowrap;
}

/* サイズ */
.width30  { width:  30px; }
.width40  { width:  40px; }
.width45  { width:  45px; }
.width50  { width:  50px; }
.width60  { width:  60px; }
.width70  { width:  70px; }
.width80  { width:  80px; }
.width90  { width:  90px; }
.width100 { width: 100px; }
.width150 { width: 150px; }
.width170 { width: 170px; }
.width180 { width: 180px; }
.width190 { width: 190px; }
.width200 { width: 200px; }
.width250 { width: 250px; }
.width280 { width: 280px; }
.width300 { width: 300px; }
.width350 { width: 350px; }
.width400 { width: 400px; }
.width450 { width: 450px; }
.width500 { width: 500px; }
.width600 { width: 600px; }
.width700 { width: 700px; }
.width800 { width: 800px; }
.width900 { width: 900px; }
.width-full { width: 100%; }

/* スクロール制御 */
.table-header{
  position: sticky;
  top: 0px;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}

/* リストテーブル */
.list-table th:first-child{
  border-radius: 5px 0 0 0;
}

.list-table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

.list-table th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  --width: 25%;
  padding: 10px 0;
}

.list-table td{
  --text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  --width: 25%;
  padding: 5px 5px;
}

.list-table td:last-child{
  border-right: 1px solid #a8b7c5;
}

.list-table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

.list-table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}


/* NAVI */

/* Navigation */
.cp_navi {
	--background-color: #ffffff;
	--border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #ffffff;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
}
.cp_navi ul {
	margin: 0;
	padding: 0;
}
.cp_navi ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi > ul > li > a {
	color: #ffffff;
	display: block;
	line-height: 56px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
	--color: rgb( 0, 0, 0);
}
.cp_navi > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
	--border-top-color: rgb( 0, 0, 0 );
}
.cp_navi > ul > li > div {
	background-color: rgb(218, 60, 65);
	--background-color: rgb(255, 255, 255);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 165px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi > ul > li > div ul > li {
	display: block;
}
.cp_navi > ul > li > div ul > li > a {
	color: #ffffff;
	--color: #000000;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}

/* トップへ戻るボタン */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}