@charset "utf-8";
/* CSS Document */
body {
  margin: 0;
  padding: 0;
  font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
  overflow-x: hidden;
  box-sizing : border-box;
}
a {
  text-decoration: none;
}

a,a:hover,a:visited{
    color: inherit;
}

/* カラー*/
.textcolor01 { color: #cf81ec; }
.textcolor02 { color: #f67a90; }
.textcolor03 { color: #f678a4; }
.textcolor04 { color: #f49249; }
.textcolor05 { color: #bfd123; }
.textcolor06 { color: #64bdef; }
.textcolor07 { color: #e0bb0f; }
.textcolor08 { color: #faa93b; }
.g   { color: #0BCD1C; }
.o   { color: #FF7B24; }
.q   { color: #35C3E7; }
.v   { color: #6704CC; }
.r   { color: #E00207; }
.y   { color: #F7E240; }
.p   { color: #FCA3AC; }
.b   { color: #2A00DD; }
.cy  { color: #986e49; }
.bu  { color: #A07A59; }
.chu { color: #6F4E37; }
.font_color   { color: #3CB371; }/* 文字色指定 */
.mistyrose    { color: #E3A6A1; }
.babyblue     { color: #A2C2D0; }
.cashmerepink { color: #EBC3C3; }
.mintgreen    { color: #C3D5C7; }
.honeyyellow  { color: #E1C797; }
.color-k  { color: #E6213A; }
.color-i  { color: #FCCF00; }
.color-d  { color: #8DC21F; }
.color-s  { color: #0075C1; }
.color-e  { color: #ED7700; }
.color-y  { color: #e07483; }
.color-b  { color: #00A6E9; }
.color-bu { color: #A07A59; }

.pon10 {margin-top: 10px;}
.pon20 {margin-top: 20px;}
.pon30 {margin-top: 30px;}
.pon40 {margin-top: 40px;}
.pon50 {margin-top: 50px;}
.pon100 {margin-top: 100px;}
.pon150 {margin-top: 150px;}
.pen {margin: 0 8px;}
.pen16 {margin: 0 16px;}
.pun {margin: 8px 0;}
.pun16 {margin: 16px 0;}

a.btn_02 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	border-radius: 10px;
	color: #b2d1f7;
	background: #fff;
	border: 3px solid #b2d1f7;
	box-shadow: 5px 5px #b2d1f7;
	transition: 0.3s ease-in-out;
}

a.btn_02:hover {
	box-shadow: none;
	transform: translate(5px, 5px);
	color: #CCCCCC;
}

a.btn_03 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	border-radius: 10px;
	color: #ebb0c1;
	background: #fff;
	border: 3px solid #ebb0c1;
	box-shadow: 5px 5px #ebb0c1;
	transition: 0.3s ease-in-out;
}

a.btn_03:hover {
	box-shadow: none;
	transform: translate(5px, 5px);
	color: #E52D8A;
}

a.btn_05 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 250px;
	margin: auto auto 40px;
	padding: 10px 20px;
	border-radius: 10px;
	color: #ffffff;
	background: #99CC99;
	border: 3px solid #bedea4;
	box-shadow: 5px 5px #bedea4;
	transition: 0.3s ease-in-out;
}
.title:before {
  content: url('../img/wata.png');
	padding: 0 10px 0 0;
		color: #ffffff;
}
a.btn_05:hover {
	color: #ffffff;
	box-shadow: none;
	transform: translate(5px, 5px);
}

hr {color: antiquewhite;}

hr.style1 {
	border-top: 4px dotted #ebb0c1;
	border-bottom: 4px dotted #fff;
}
hr.style2 {
 display: block;
  border: 0;
  width: 100%;
  height: 30px;
  background: url("../img/hrk.png") top center;
  -webkit-background-size: 70px 30px;
}
hr.style3 {
 display: block;
  border: 0;
  width: 100%;
  height: 30px;
  background: url("../img/hr.png") top center;
  -webkit-background-size: 70px 30px;
}
hr.style4 {
	border-top: 4px dotted #e8a37d;
	border-bottom: 4px dotted #fff;
}

.width {
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding: 2px;
}

.ifram {
   filter: grayscale(30%);
   transition: all 0.7s ease;
}	
 .flexbox, .flexbox01, .flexbox_02 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

.ribbon1:before, .ribbon1:after, .ribbon2:before, .ribbon2:after, .ribbon3:before, .ribbon3:after, .ribbon7:before, .ribbon7:after, .ribbon6:before, .ribbon6:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before, .ribbon2:before, .ribbon3:before, .ribbon7:before, .ribbon6:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon1:after, .ribbon2:after, .ribbon3:after, .ribbon7:after, .ribbon6:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}
.heroimg {
	 border-radius: 15px;
}
.fot_02 {
}

.sp_br {
  display: none; /*420px以上では改行タグを無効に。*/
}
@media screen and (max-width: 420px) {
  .sp_br {
    display: block; /*420px未満で改行タグを有効に。*/
  }
}