@charset "utf-8";
/* CSS Document */

/*************************************************

全体

*************************************************/
.wrapper{
	width: 60%;
  	margin: 0 auto;
	text-align: center;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

@media screen and (max-width: 600px){
  .wrapper{
    width: 90%;
	margin: 0 auto;
  }
}

/*アンダーライン*/
.underline {
	background: linear-gradient(transparent 70%, #fef9d1 70%);
}

p{
	text-align: left;
}
/*************************************************

会話（チャット風）

*************************************************/
.balloon{
	margin: 3em 0;
}
.balloon .icon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

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

.balloon .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

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

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

目次

*************************************************/

.contents {  
	background: #fffcf4;
	border-radius :8px;/*角の丸み*/
	box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
	padding: 0.5em 0.5em 0.5em 0.7em;
	text-align: left;	
}

/*************************************************

見出し

*************************************************/
/*タイトル*/
h2{
	text-align: left;
	margin-bottom: 3em;
	font-size: 1.5em;
}
/*大見出し*/
h3 {
	color: #364e96;/*文字色*/
	padding: 0.5em 0;/*上下の余白*/
	border-top: solid 3px #364e96;/*上線*/
	border-bottom: solid 3px #364e96;/*下線*/
	
	text-align: left;
	margin-top: 5em;
	font-size: 1.3em;
}

/*小見出し*/
h4 {
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #364e96;/*文字色*/
	background: transparent;/*背景透明に*/
	text-align: left;
	
	margin-top: 3em;
	font-size: 1.2em;
}

/*************************************************

画像

*************************************************/
.sec3{
	
}
img {
	width:95%;
}
/*画像のレスポンシブ対応*/
@media (max-width: 600px){
  img{
	  width: 100%;
  }
}

.soothsayer{
	width: 50%;
}

/*************************************************

箇条書き

*************************************************/
.list{
	
	padding: 1em 1em 1em 3em;
    margin: 2em 0em;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
	text-align: left;
}


/*************************************************

セリフ

*************************************************/
.quote{
	display: flex;
	margin: 1.5em;
}
.quote_left{
	
}

.quote_left img{
	width: 80px;
	border-radius: 50%;
}
.quote_right p{
	font-weight: bold;
}

.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #7db4e6;
}
.box p {
    margin: 0; 
    padding: 0;
	line-height: 1.6em;/*行間*/
}

/*************************************************

cta

*************************************************/
.cta{
	font-weight: bold;
	font-size: 1.2em;
	text-align: left;
}
/*************************************************

コメント

*************************************************/
.comment{
	padding: 0.5em 1em;
    margin: 3em 0;
    color: #5d627b;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	font-size: 1em;
	
}


/*************************************************

フッタ

*************************************************/

.footer {
    width: 100%;
	margin-top: 30px;
	
}
.footer ul {
	display: inline-block;
}
.footer li {
	list-style: none;
	text-align: left;
}
.footer p{
	text-align: center;
	font-size: 12px;
}