@charset "Shift_JIS";
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

*,
*::before,
*::after{
  -webkit-box-sizing : inherit;
  box-sizing: inherit;
}

html{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn-wrap{
  margin: 30px 0;
}

a.btn-c{
  font-size: 2.2rem;

  position: relative;

  padding: 0.25rem 2rem 1.5rem 3.5rem;

  color: #fff;
  background:#fd5e92;
  -webkit-box-shadow: 0 5px 0 :#fd5e92;
  box-shadow: 0 5px 0 :#fd5e92;
}

a.btn-c span{
  font-size: 1.5rem;

  position: absolute;
  top: -10px;
  left: calc(50% - 150px);

  display: block;

  width: 300px;
  padding: 0.2rem 0;

  color: #e6153e;
  border: 2px solid #e6153e;
  border-radius: 0.5rem;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a:hover.btn-c{
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  background:#ee0249;
  -webkit-box-shadow: 0 2px 0 #e6153e;
  box-shadow: 0 2px 0 #e6153e;
}

a:hover.btn-c::before{
  left: 2rem;
}


.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;/*線を消す*/
}

a.bt-samp20{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 200px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid #119de9;
  border-bottom: 2px solid #002266;
  background: #119de9;
  background: -webkit-gradient(linear, left top, left bottom, from(#6dccff), to(#003399));
  background: -moz-linear-gradient(top, #6dccff, #003399);
  background: -o-linear-gradient(top, #6dccff, #003399);
  background: -ms-linear-gradient(top, #6dccff, #003399);
  background: linear-gradient(top, #6dccff, #003399);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6dccff', endColorstr='#003399');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6dccff', endColorstr='#003399')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp20 span{
  display: block;
  padding: 2px 0;
  border-top:2px solid #c6ebff;
}
a:active.bt-samp20{
	  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}


a.bt-samp21{
  display: block;
  position: relative;
  text-decoration: none;
  height:35px;
  width: 200px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 3px #ccc;
  border-top: 2px solid : #ff4d70;
  border-bottom: 2px solid : #ff335c;
  background: #ff4d70;
  background: -webkit-gradient(linear, left top, left bottom, from(#e67373), to(#ff6666));
  background: -moz-linear-gradient(top, #e67373, #ff6666);
  background: -o-linear-gradient(top, #e67373, #ff6666);
  background: -ms-linear-gradient(top, #e67373, #ff6666);
  background: linear-gradient(top, #e67373, #ff6666);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e67373', endColorstr='#ff6666');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e67373', endColorstr='#ff6666')";
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;
  border-radius: 3px;
}
a.bt-samp21 span{
  display: block;
  padding: 1px 0;
  border-top:2px solid : #ffcccc;
}
a:active.bt-samp21{
	  /* クリックした時 */
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: none;
}



.highlight{
    background: linear-gradient(transparent 50%, #ffff33 0%);
    line-height: 1.3em;
}

r1{
  position: relative;
  padding-left: 25px;
}

r1::before{
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}
r1::after{
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

.ribbon12-wrapper{
	  
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width : 627px;
  background: #f8f8ff;
  }

.ribbon12{
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 0 0 -20px;
  width: calc(100% + 20px);
  font-size: 22px;
  color: white;
  background: #ff0000;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.ribbon12::before{
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #990000;
}




.box11{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #e60000;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p{
    margin: 0; 
    padding: 0;
}



r5{
    padding : 1em 1em 0.5em;
    margin : 5em 0px 2em;
    color: #5d627b;
    background: white;
    border-top : 5px solid #e60000;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  height : 35px;
  position : static;
}
r5 p{
    margin: 0; 
    padding: 0;
}



.box3{
    color : #2c2c2f;
    background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffc14d;/*背景色*/
}
.box3 p{
    margin: 1.5em; 
    padding: 1.5em;
}




.btn-sticky{
  display: inline-block;
  padding: 0.5em 1em;
width: 200px;
  text-decoration: none;
  background: #f7f7f7;
  border-left : 6px solid #ff80c0;/*左線*/
  color: #0033FF;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky:active{
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}


h10{
  position: relative;
  padding: 1.5em;
  background: #a6d3c8;
  color: white;
}

h10::before{
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}



.balloon2-left{
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2-left::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon1-left{
  position: relative;
  display: inline-block;
  margin : 1em 0px 0.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-left::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
　
}

.balloon1-left p{
  margin: 0;
  padding: 0;
}



.balloon1-right{
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1-right::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0edff;
}

.balloon1-right p{
  margin: 0;
  padding: 0;
}



.balloon5{
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon{
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting{
  width: 100%;
}

.says{
	display: inline-block;
	position: relative;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 105px;
	padding-top: 17px;
	padding-right: 13px;
	padding-bottom: 17px;
	padding-left: 13px;
	border-top-left-radius: 12px 12px;
	border-top-right-radius: 12px 12px;
	border-bottom-right-radius: 12px 12px;
	border-bottom-left-radius: 12px 12px;
	background-color: #feb6d2;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
	background-size: auto auto;
	background-origin: padding-box;
	background-clip: border-box;
}

.says::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #ffb6c1;
}

.says p{
  margin: 0;
  padding: 0;
}

a.btn-flat{
  overflow: hidden;
  padding: 1rem 3rem;
margin: 3px 3px 3px 3px;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span{
  position: relative;
}

a.btn-flat::before{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background:#0066FF;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.example{
  position: relative;
  }

.example p{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-800%,-50%);
  -webkit-transform: translate(-80%,-50%);
  transform: translate(-80%,-50%);
  margin:0;
  padding:0;
color: #00ff00;　 
 font-size: rem;
  }

.example img{
  width: 100%;
  }


.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color : #995c1f;
    background : none 0% 0% / auto auto repeat scroll padding-box border-box #ccecde;
    border-bottom : 6px solid #8bd3b3;
    border-radius: 9px;
}
.box12 p{
    margin: 0; 
    padding: 0;
}
a.btn--orange{
  color: #fff;
  background-color: #ff80aa;
  border-bottom: 5px solid #ff1a66;
}
a:hover.btn--orange{
  margin-top: 3px;
  color: #fff;
  background:#ffb3cc;
  border-bottom: 2px solid #ff1a66;
}
a.btn--shadow{
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

.text{
	color: #ff66b3;
	text-shadow: 0px 1px #bbbbbb, 1px 2px #bbbbbb, 3px 3px 3px #000000;
	font-size: 20px;
}

.ribbon{
	display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
padding:3px 0;
font-size: 15px;
background: #41aece;
color: #fff;
box-sizing: border-box;
}

.ribbon h2{
	vertical-align: middle;
margin: 0;
padding: 0 10px 0 10px;
border-top: dashed 1px #FFF;
border-bottom: dashed 1px #FFF;
line-height: 30px;
}

.ribbon::after{
	position: absolute;
content: '';
z-index: 1;
top: 0;
right: 0;
width: 0px;
height: 0px;
border-width: 15px 0px 15px 0px;
border-color: transparent #fff transparent transparent;
border-style: solid;
}


a.btn_04{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
　　　 font-size: 12px;
	width: 200px;
      height: 40px;
	margin: auto;
	padding: 1rem 1rem;
	font-weight: bold;
	border: 2px solid #ff99bb;
	background: #ff99bb;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a:hover.btn_04{
	color: #ff99bb;
	background: #fff;
}

a.btn_05{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
       font-size: 12px;
	width: 200px;
      height: 40px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a:hover.btn_05{
	color: #27acd9;
	background: #fff;
}