@charset "utf-8";
body{
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	
}
h2{border-bottom: medium;}
.center{
	position: relative;

  margin-left: auto;
  margin-right: auto;
  width: 80%;
} 
header{
	background-image: url("img/storm-7952_256.gif");
	height: 150px;
	
}
.arrow-clippath {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: #1E88E5;
  clip-path: polygon(0 63%, 29% 63%, 29% 0, 67% 0, 67% 62%, 100% 62%, 49% 100%);
	transform: skew(0deg);
}
.chat{
	height: 2217px;
	width: auto;
	background-image: url(img/%E6%B0%B4%E9%98%B2%E3%83%95%E3%83%AD%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%885.png);
	background-repeat: no-repeat;
	background-position: center;
}
/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
 width: 300px;                 /* 幅指定 */
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
	margin-top: 4rem;
  padding: 1rem;
  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;
}
.btn2,
a.btn2,
button.btn2 {
	 width: 230px;                 /* 幅指定 */
  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;
}
.btn3,
a.btn3,
button.btn3 {
	 width: 230px;             /* 幅指定 */
  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;
}
.chat div{
	height: 220px;
}

.btn--orange,
a.btn--orange {
	color: #D5070A;
	background-color: #00B4EB;
}
.btn--orange:hover,
a.btn--orange:hover {
	color: #0067BB;
	background: #2222;
}
.btn--orange2,
a.btn--orange2 {
	color: #D5070A;
	background-color: #21FF71;
}
.btn--orange2:hover,
a.btn--orange2:hover {
	color: #fff;
	background-color: #2222;
}
.btn--orange3,
a.btn--orange3 {
	color: #212020;
	background-color: #85D1E1;
}
.btn--orange3:hover,
a.btn--orange3:hover {
	color: #F94444;
	background-color: #D9F0F3;
}
.btn--orange4,
a.btn--orange4 {
	color: #212020;
	background-color: #FDC3CA;
}
.btn--orange4:hover,
a.btn--orange4:hover {
	color: #FB5959;
	background-color: #B0DFF0;
}
.btn--orange8,
a.btn--orange8 {
	color: #D5070A;
	background-color:aquamarine;
}
.btn--orange8:hover,
a.btn--orange8:hover {
	color:  #0067BB;
	background-color: #B0DFF0;
}
.btn--orange9,
a.btn--orange9 {
	color: #D5070A;
	background-color:yellow;
}
.btn--orange9:hover,
a.btn--orange9:hover {
	color:  #0067BB;
	background-color: #B0DFF0;
}
.btn--orange10,
a.btn--orange10 {
    color: #2F2BA6;
    background-color: darkorange;
}
.btn--orange10:hover,
a.btn--orange10:hover {
    color: #F1353B;
    background-color: #B0DFF0;
}
.btn--orange11,
a.btn--orange11 {
	color:aquamarine;
	background-color:crimson;
}
.btn--orange11:hover,
a.btn--orange11:hover {
	color:  #D5070A;
	background-color: #B0DFF0;
}
.btn--orange5,
a.btn--orange5 {
	height: 120px;
	width: 250px;
	color: #D5070A;
	background-image:url("img/taihu.jpg");
	background-repeat: no-repeat;
	background-position: center;
	
}
.btn--orange5:hover,
a.btn--orange5:hover {
	color: #FB5959;
	background-image: url("img/taihu2.jpg");
		background-repeat: no-repeat;
	background-position: center;
}
.btn--orange6,
a.btn--orange6 {
	height: 120px;
	width: 250px;
	color: #D5070A;
	background-image:url("img/keihou.jpg");
	background-repeat: no-repeat;
	background-position: center;
	
}
.btn--orange6:hover,
a.btn--orange6:hover {
	color: #FB5959;
	background-image:url("img/keihou2.jpg");
	background-repeat: no-repeat;
	background-position: center;
	
}
.btn--orange7,
a.btn--orange7 {
	height: 120px;
	width: 250px;
	color: #D5070A;
	background-image:url("img/amagumo.jpg");
	background-repeat: no-repeat;
	background-position: center;
	
}
.btn--orange7:hover,
a.btn--orange7:hover {
	color: #FB5959;
	background-image:url("img/amagumo2.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
.fa-position-left {
  position: absolute;
  top: calc(50% - .5em);
  left: 1rem;
}
.btn1{
		height: 250px;
	padding-top: 30px;
	margin-left: 340px;
}
.wsize500{
	 position:  absolute;
	width: 300px;
}
.wsize250{
	width: 250px;
	position: absolute;     /* 背景色指定 */
	padding: 10px;             /* 余白指定 */
	right: 50px;                /* 左からの位置指定 */
	top: 180px;                  /* 上からの位置指定 */
	bottom: 10px;
}
	


.h50{
	height: 80px;
	margin: 0;
	padding: 0;
		
}
.m5{
	margin-top: 5px;
	padding-top: 5px;
}
.m15{
	margin-top: 15px;
	padding-top: 25px;
}
.m50{
	margin-top: 50px;
	padding-top: 25px;
}
.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
       /* 背景色指定 */
    padding:  0;  
	margin: 0;/* 余白指定 */
    height: 120px;
	 width: 33%;                 /* 幅指定 *//* 高さ指定 */
}
.parent {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
 display:flex;
  text-align: center;         /* 子要素を左右中央揃えにする */
              /* 枠線指定 */
   padding:  20px;
}
.borderm{
		 border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
	}
.borderm2{
		 border: solid 3px #E2186F ;/*線*/
    border-radius: 10px;/*角の丸み*/
	}
.textbox{
	position: absolute;
	margin-top: 60px;
	width: 180px;
}


.box2 {
	position:  absolute;
   	padding: 0;
   
    font-weight: bold;
    color: #6091d3;/*文字色*/
   width: 180px;
    
    border-radius: 10px;/*角の丸み*/
	display: flex;
  flex-direction: column; /* 縦向き */
  
  height: 100vh; /* 高さの指定をしないと機能しません */
}
.box2 p {
    margin: -100; 
    padding: 0;
	}
.fsize{
	font-size: 1.5em;

}
.fcor{
	color:black;
}
/*text 影*/
.white-text-with-blue-shadow {
	
	width: 230px;
  text-shadow:
    1px 1px 2px black,
    0 0 2em blue,
    0 0 0.5em red;
  color:cornsilk;
  font:
    1.5em ;
}
.original-text-shadow {
  display: flex;
	
	margin: 0.5em;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color:black;
  font-size: 50px;
  text-shadow: 2px 3px 3px rgba(156, 42, 42, 0.4), 2px 3px 3px rgba(3, 149, 199, 1), 2px 3px 3px rgba(156, 42, 42, 0.4), 2px 3px 3px rgba(156, 42, 42, 0.4), 2px 3px 3px rgba(156, 42, 42, 0.4);
  font-weight: bold;
}
.original-text-shadow2 {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color:deeppink;
  font-size: 40px;
  text-shadow: 2px 3px 3px rgba(156, 42, 42, 0.4), 2px 3px 3px rgba(220, 230, 2, 1), 2px 3px 3px rgba(156, 42, 42, 0.4), 2px 3px 3px rgba(156, 42, 42, 0.4), 2px 3px 3px rgba(156, 42, 42, 0.4);
  font-weight: bold;
}
.cl1{
	position: absolute;
	z-index: 1;
	top:20px;
	line-height: 60px;
	height: 60px;
}
.cl2{
	position: absolute;
	z-index: 2;
		top:90px;
	line-height: 60px;
	height: 60px;
	

}
.kage{
	 text-shadow: 3px 4px 3px rgb(61 70 70);
}
.textcr{
	color: #E2186F;
}
footer{
	text-align: center;
	padding-top: 25px;
	height: 60px;
	background-image: url("img/storm-7952_256.gif");
}
.kozi{
	text-align: center;
	margin: 10;
	font-size: 2em}
.koment{
	font-family: arial;
  font-size: 2.0em;
  margin: 25px;
  width: 450px;
  height: 200px;
  margin: auto;
}