@charset "UTF-8";

#content .section {
	margin-right: -10px;
	margin-left: -10px;
	position: relative;
}


#content .image-cover {
	width: 100%;
	height: 50vh;
	position: relative;
	top:0;
	left:0;
	overflow: hidden;
}

#content .image-cover .image-title {
	position: absolute;
	top:0px;
	left:0px;
	padding:5px;
	display:inline-block;
	background-color: rgba( 255, 255, 255, 0.75 );
}

#content .image-cover .image-title-bottom {
	position: absolute;
	bottom:0px;
	left:0px;
	padding:5px;
	display:inline-block;
	background-color: rgba( 255, 255, 255, 0.75 );
}

#content #image-top1 {
	background: url('../images/mel_top01@2x.jpg');
	background-size: cover;
	background-position: 50% 50%;
}
#content #image-top2 {
	background: url('../images/mel_top02@2x.jpg');
	background-size: cover;
	background-position: 50% 50%;
}

#content .box {
	padding: 1em;
	border: none;
	margin-bottom: 3rem;
	box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1);
}

#content .box.radius {
	border-radius: 10px;
}


#content .box h3 {
	margin-top: 0;
}
#content .box p {
	margin-top: 0;
	line-height: 1.4;
}

#content .flexbox {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#content .flexbox.reverse {
	flex-direction: row-reverse;
}

#content .flexbox .flexitem.width30 {
	width:30%;
}
#content .flexbox .flexitem.width40 {
	width:40%;
}

#content .flexbox .flexitem {
	padding: 2rem;
	max-width: 50%;
}
#content .flexbox .flexitem.width70 {
	width:70%;
	max-width: 70%;
}

#content .box.gray {
	background-color: #444444;
	color: #FFFFFF;
}
#content .box.blue {
	background-color: #275994;
	color: #FFFFFF;
}

#content .box.green {
	background-color: #00AC56;
	color: #FFFFFF;
}

#content .box.lightgreen {
	background-color: #6fd09f;
	color: #333333;
}
#content .box.lightblue {
	background-color: #7FADF1;
	color: #FFFFFF;
}


#content .box.olive {
	background-color: #6C8F28;
	color: #FFFFFF;
}

#content .box.pink {
	background-color: #F56883;
	color: #FFFFFF;
}

#content .box.purple {
	background-color: #713b97;
	color: #FFFFFF;
}


#content .box.orange {
	background-color: #F46600;
	color: #FFFFFF;
}

#content .box.red {
	background-color: #FF1D1D;
	color: #FFFFFF;
}


#content a .box {
	text-decoration-line: none;
}


#content .box.default {
	background-color: #FFFFFF;
}


#content .mbtm1rem {
	margin-bottom: 1rem;
}

#content .mbtm3rem {
	margin-bottom: 3rem;
}

#content .mtop3rem {
	margin-top: 3rem;
}

#content .mtop0rem {
	margin-top: 0;
}

#content .md {
	font-size: 200%;
}

#content .bg {
	font-size: 400%;
}

#content .sm {
	font-size: 140%;
}

@media all and (max-width: 515px) {

#content .flexbox .flexitem {
	padding: 0.5rem;
	width: auto;
}


#content .bg {
	font-size: 5.6vw;
}

#content .md {
	font-size: 4.7vw;
}

#content .sm {
	font-size: 4.0vw;
}


#content .image-cover {
	width: 100%;
	height: 40vh;
	position: relative;
	top:0;
	left:0;
	overflow: hidden;
}


}

#content .label.label-block {
	display: block;
}
#content .label.label-outline.label-pink {
	color: #F56883;
	background: #FFFFFF;
}


#content .panel.panel-square {
	border-radius :0;
}

#content .panel.panel-thick {
	border-width :3px;
}

#content .panel .panel-body.panel-full {
	padding:0;
	margin:0;
}

#content .panel.panel-danger {
	border-color :#FF5C67;
}

#content .panel.panel-danger .panel-heading {
	background-color: #FF5C67;
	border-color:#FF5C67;
	color: #FFFFFF;
}

#content .panel.panel-danger .panel-footer {
	background-color: #FF5C67;
	border-color:#FF5C67;
	color: #FFFFFF;
}

#content .panel.panel-success .panel-footer {
	background-color: #00AC56;
	border-color:#00AC56;
	color: #FFFFFF;
}

#content .panel.panel-info {
	border-color :#275994;
}

#content .panel.panel-info .panel-heading {
	background-color: #275994;
	border-color:#275994;
	color: #FFFFFF;
}


#content .panel.panel-info .panel-footer {
	background-color: #275994;
	border-color:#275994;
	color: #FFFFFF;
}


#content .panel.panel-danger .label-danger.label-outline {
	background-color: #FFFFFF;
	border-color:#FF5C67;
	color: #FF5C67;
}

#content .panel.panel-yellow {
	border-color :#FFBD32;
	background-color: #FFF1CE;
}


/* ----------------------------------------
 * 丸の中の文字
 * ---------------------------------------- */
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column; 
  vertical-align: middle;
  margin: 1px;
	position: relative;
	left: -20px;
}

@media all and (max-width: 769px) {
.maru {
	left: -30px;
}
}

@media all and (max-width: 579px) {
.maru {
	left: 20%;
}
}
/* 円の大きさ */
.size_normal{
  width: 80px;
  height: 80px;
}
/* 文字の大きさ */
.letter3 {
  font-size: 1em;
  line-height: 1.5em;
}
/* 円と文字の色 */

.gray1 {
  color: #5F5F5F;
  border: 1px solid #5F5F5F;
}
.yellow1 {
  color: #C7B500;
  border: 1px solid #C7B500;
}
.purple1 {
  color: #8a2be2;
  border: 1px solid #8a2be2;
}
.blue1 {
  color: #fff;
  border: 1px solid #00008b;
	background-color: #00008b;
}
.pink1 {
  color: #E500B3;
  border: 1px solid #E500B3;
}
.green1 {
  color: #008000;
  border: 1px solid #008000;
}