@charset "utf-8";
@import url(http://parts.blog.livedoor.jp/css/template_6thgen.css);

/**
@prefix : <http://purl.org/net/ns/doas#> .
<> a :CSSStylesheet;
 :title "ver06_si_classicivy_2c";
 :shortdesc "Design Template for livedoor Blog";
 :created "2014-02-03";
 :release [:revision "1.20"; :created "2014-02-03"];
 :page <>;
 :rights "LINE Corporation".
*/


/* 全体のレイアウト
----------------------------------------------- */
body {
       background-color: #ffffff;
       font-family:'Trebuchet MS','Georgia','Arial','UDデジタル教科書体 M JIS2004', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
}
#wrapper {
}
#container {
	margin: 0 auto;
	width: 1100px;
}
#content {
	position: relative;
	padding: 20px 0 0;
}
#main {
}
#sidebar {}

/* 2カラムレイアウトのとき */
body.layout-2col #content {
}
body.layout-2col #main {
	width: 760px;
}
body.layout-2col #main-inner {}
body.layout-2col #sidebar {
	width: 300px;
}
body.layout-2col #sidebar-inner {}

/* 右サイドバー */
body.layout-2col.sidebar-right #content {}
body.layout-2col.sidebar-right #main {
	float: left;
	padding: 0 40px 0 0;
}
body.layout-2col.sidebar-right #sidebar {
	float: right;
}

/* 左サイドバー */
body.layout-2col.sidebar-left #content {}
body.layout-2col.sidebar-left #main {
	float: right;
	padding: 0 0 0 40px;
}
body.layout-2col.sidebar-left #sidebar {
	float: left;
}


/* 全体の文字色、リンク色
----------------------------------------------- */
body {
	color: #261313;
	font: 0.9em
        line-height: 125%;
        letter-spacing: 0px;
}
a,
body.page-article .article-title a:visited,
.calendarhead a:visited {
	text-decoration:none;
}
a:link {
	color: #2a37ed;
}
a:visited {
	color: #2a37ed;
}
a:hover {
	color: #FF0099;
	text-decoration:underline;
}
a:active {
	color: #FF0099;
}


/* ブログのヘッダー、タイトル、説明
----------------------------------------------- */
#blog-header {
	background: url(http://parts.blog.livedoor.jp/img/usr/ver06_si_classicivy_2c/header_bg.png) repeat 0 40px;
}
#blog-header-inner {
	width: 1080px;
	margin: 0 auto;
}
#blog-title {
	padding: 32px 0 27px;
	color: #000;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
	font-size: 35px;
	line-height: 45px;
}
#blog-title a,
#blog-title a:hover {
	color: #000;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
}
#blog-description {
	padding-bottom: 32px;
	color: #433434;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
	font-size: 0.95em;
	line-height: 25px;
}
#blog-description a {
	text-decoration: underline;
}
#blog-description a:hover {
	text-decoration: none;
}


/* ナビ
----------------------------------------------- */
.ldb_menu {
    position: relative;
    z-index: 20;
}
.ldb_menu {
	background: #492f27;
}
.ldb_menu-list:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}
.ldb_menu-list {
	margin: 0 auto;
	width: 1080px;
	text-align: center;
	zoom:100%;
}
.ldb_menu-list li {
	display: inline-block;
	list-style: none;
	*display: inline;
	*zoom: 1;
}
.ldb_menu-list li a{
	display: block;
	padding: 18px;
	color: #fffaf9;
	text-shadow: -1px -1px 0 rgba(42,36,36,0.9);
	font-size: 15px;
	line-height: 1;
}
.ldb_menu-list .ldb_menu-item-current,
.ldb_menu-list li:hover,
.ldb_menu-list li a:hover {
	background: #c55a41;
	text-decoration: none;
}


/* メインカラム
----------------------------------------------- */
/* ヘッドライン */
.headline {
	height: 310px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 980px;
}
.headline-content {
	background: #1a1a1a;
	width: 300px;
	height: 310px;
	float: right;
	position: relative;
}
.headline-image {
	float: left;
	width: 680px;
	height: 310px;
	overflow: hidden;
	background: #1a1a1a;
}
.headline-image-hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
.headline-image-layer a {
	display: block;
	width: 680px;
	height: 310px;
	box-shadow: 0 0 5px #666 inset;
	position: absolute;
	top: 0;
	left: 0;
}
.headline-date {
	color: #fff;
	font-size: 12px;
	padding: 30px 30px 20px;
}
.headline-title {
	color: #fff;
	font-size: 27px;
	padding: 0 28px;
	line-height: 31px;
	height: 186px;
	overflow: hidden;
}
.headline-title a {
	color: #fff;
}

.headline .article-meta {
	position: absolute;
	bottom: 20px;
	left: 0;
	padding: 0 30px;
}
.headline .article-category dt {
	background: url(http://parts.blog.livedoor.jp/img/usr/ver06_hr_colormosaic_2c/ico_category_w.gif) no-repeat 0 0;
	width: 12px;
}
.headline .article-category a:link {
	color: #2090fe;
}
.headline .article-category a:visited {
	color: #5e80ff;
}
.headline .article-category a:hover {}
.headline .article-category a:active {
	color: #e50147;
}

/* 記事index */
.article-index {
	padding: 0 0 0 0;
	width: 330px;
	float: left;
	display: inline;
	margin: 0 50px 0 0;
}
.article-index-hover {
	background: #f6f6f6;
}
.article-index-even {
	margin-right: 40px;
}
.article-index-header {
	margin-bottom: 15px;
}
.article-index-image {
	margin-bottom: 15px;
}
.article-index-image img {
	border: 1px solid #fff;
	box-shadow: 0px 0px 2px rgba(51, 51, 51, 0.4);
	margin: 2px;
}
.article-index-image a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
.article-index-date {
	font-size: 12px;
	margin-bottom: 5px;
	color: #666;
}
.article-index-title {
	color: #0d0d0d;
	font-weight: bold;
}
.article-index-title a {
	color: #0d0d0d;
	display: block;
	font-size: 23px;
	line-height: 30px;
	height: 90px;
	overflow: hidden;
}
.article-index-body {
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	height: 90px;
	color: #333;
}
.article-index-body * {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	color: #333 !important;
	display: inline;
	text-align: left !important;
}
.article-index-body img,
.article-index-body br {
	display: none;
}
.article-index-body b,
.article-index-body strong {
	font-weight: normal;
}

/* アーカイブ */
.article-archive {
	margin-bottom: 38px;
	position: relative;
}
.article-archive-main {
	float: right;
	width: 470px;
}
.article-archive-image {
	float: left;
	width: 152px;
}
.article-archive-image a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
.article-archive .director-social-btn {
	position: absolute;
	bottom: 0;
	left: 170px;
}

.article-archive-image img {
	border: 1px solid #fff;
	box-shadow: 0px 0px 2px rgba(51, 51, 51, 0.4);
	margin: 2px;
}

.article-archive-date {
	font-size: 12px;
	margin-bottom: 5px;
	color: #999;
}
.article-archive-title {
	color: #333;
	font-size: 24px;
	line-height: 28px;
	font-weight: bold;
	height: 56px;
	overflow: hidden;
}
.article-archive-title a {
	color: #333;
}
/* 記事全体 */
.article-body {
	border-top: 1px solid #fff;
	padding-top: 25px;
}

.article {
	padding-top: 20px;
	margin-bottom: 20px;
}

.first-article {
	padding-top: 0;
}

.article-rating {
	margin-bottom: 10px;
	display: block;
}

/* 記事ヘッダー、記事タイトル */
.article-header {
	position: relative;
}
.article-title {
	padding-bottom: 20px;
	border-bottom: 1px solid #efe5e5;
	color: #9a1701;
	text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
	font-size: 28px;
	line-height: 38px;
}
.article-title a {
	color: #ffffff;
}

/* 日付 */
.article-date {
	font-size: 13px;
	color: #1a1a1a;
	margin-bottom: 15px;
}


/*仕切り*/
.article-footer {
	padding-bottom: 58px;
	background: url(http://parts.blog.livedoor.jp/img/usr/ver06_si_classicivy_2c/hr.png) no-repeat bottom;
}

.page-article .article-footer {
	margin-bottom: 20px;
}

/* 記事フッター、カテゴリ、コメント、ソーシャルボタン */
.article-footer-inner:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}
.article-footer-inner {
	zoom:100%;
}
.article-footer-inner-box {
	float: right;
}
.article-footer {
	margin-top: 1em;
}

.article-tags {
	float: left;
	margin: 0 !important;
	padding: 16px 0 !important;
	line-height: 1 !important;
}

.article-tags dd {
	margin-left: 0 !important;
	border-left: 1px solid #999;
	list-style: none;
	font-size: 12px;
	line-height: 20px;
}

.article-tags dd a {
	line-height: 1;
	padding: 0 8px;

}
.article-tags dt + dd {
	border-left: none;
}

.article-meta {
	padding: 16px 0;
	float: left;
}
.article-meta li {
	margin: 0;
}

.article-category dt,
.article-comment-count dt {
	margin-left: 10px;
}

.article-social-btn {
	margin: 7px 0 0;
}

/* 関連記事 */
.article-body .related-articles {
	padding-top: 10px;

}
.article-body .related-articles h3 {
	margin: 0 0 15px 0;
	padding-left: 35px;
	color: #a6543c;
	font-weight: normal;
	font-size: 22px;
	background: url(http://parts.blog.livedoor.jp/img/usr/ver06_si_classicivy_2c/h1.png) no-repeat 0 10px;
}
.article-body .related-articles ul {
	list-style: none;
	margin:0;
	padding-left:0;
}
.article-body .related-articles ul li {
	margin:4px 0;
	line-height:1.3;
}

/* 続きを読む */
.article-continue {
	text-align: right;
	margin: 30px 0 10px;
}
.article-continue a {
	padding: 9px 29px;
	background: #96514d;
	color: #0b0c11;
	text-decoration: none;
	font-weight: normal;
	font-size: 15px;
}
.article-continue a:hover {
	background: #f3d2c9;
	color: #0b0c11;
	text-decoration: none;
}

/* 共通テーマ */
dl.common-theme{
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fafafa;
}

/* メッセージボード */
.message-board {
	overflow: hidden;
	margin-top: 0 !important;
	margin-bottom: 40px !important;
	padding: 13px 15px;
	background-color: #fffcfc;
	color: #433434;
	font-size: 15px;
	line-height: 1.6;
	-webkit-box-shadow: 0 0 1px rgba(205,185,185,0.75);
			box-shadow: 0 0 1px rgba(205,185,185,0.75);
}

/* プライベートモード、コメントにログインが必要な場合のメッセージ */
div.private-mode-announcement,
div.comment-auth-announcement {
	background-color: #fafafa;
	border: 1px solid #ddd;
}


/* 記事本文
----------------------------------------------- */
.article-body {
	color: #755656;
	font-size: 1.1em;
        line-height: 230%;
        letter-spacing: 0px
}
.ribbon_box {    
    display: block;
    position: relative;
    margin: 15px auto;
    padding: 10px 0;
    width: 300px;
    background: #ffffff;
  }

.ribbon10 {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 5px 0;
    margin: 0 0 0 -20px;
    width: calc(100% + 20px);
    color: white;
    background: #639dff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.ribbon10 h1{
    vertical-align: middle;
    margin: 0;
    padding: 0 30px 0 15px;
    border-top: dashed 1px #FFF;
    border-bottom: dashed 1px #FFF;
    font-size: 30px;
    line-height: 46px;
}

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

.article-body-inner h2 {
font-size: 23px;
margin: 20px 0;
position: relative;
padding: 0.25em 0;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(132, 161, 255), #ffb2b2);
background: -webkit-linear-gradient(to right, rgb(132, 161, 255), #ffb2b2);
background: linear-gradient(to right, rgb(132, 161, 255), #ffb2b2);
}

.article-body-inner h3 {
position: relative;
}
h3:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}
.article-body-inner h4 {
position: relative;/*相対位置*/
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: #3d2a2a;/*文字色*/
}

h4:before{ font-family: FontAwesome;/*忘れずに*/
content: "\f1b0";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #ff938b; /*アイコン色*/
}
.article-body-inner h5{
}
.article-body-inner h6{
}
.article-body-inner blockquote {
	background-color:#fafafa;
	border: 1px solid #fff;
}
.article-body-inner blockquote:before {
	color: #ddd;
}
.article-body-inner img.pict{
	-webkit-box-shadow: 0 0 2px rgba(205, 185, 185, 0.75);
			box-shadow: 0 0 2px rgba(205, 185, 185, 0.75);
	height: auto;
	margin: 1em 6px 1.5em!important;
	max-width: 98.4%;
}
/* グラデーションの下線 */
.gradient_underline {
  font-size: 20px;
  line-height: 25px;
  display: inline-block;
  background: -webkit-gradient(linear, left top, right bottom,
    from(rgba(255,153,0,1)),
    color-stop(50%, rgba(255,153,0,1)),
    to(rgba(255,255,255,1)));
  background: -moz-linear-gradient(left,
    #ff9900,
    #ff9900 50%,
    #fff);
  background: linear-gradient(to right,
    #ff9900,
    #ff9900 50%,
    #fff);
}
.gradient_underline_white {
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 40px;
  font-size: 20px;
  line-height: 25px;
  display: inline-block;
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(255,255,255,1)),
    color-stop(90%, rgba(255,255,255,1)),
    color-stop(91%, rgba(255,255,255,0)),
    to(rgba(255,255,255,0))
  );
  background: -moz-linear-gradient(top,
    rgba(255,255,255,1),
    rgba(255,255,255,1) 90%,
    rgba(255,255,255,0) 91%,
    rgba(255,255,255,0)
  );
  background: linear-gradient(to bottom,
    rgba(255,255,255,1),
    rgba(255,255,255,1) 90%,
    rgba(255,255,255,0) 91%,
    rgba(255,255,255,0)
  );
}

/* チェックマーク青 */
.チェックマーク青{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 20px;
	line-height: 38px;
}
.チェックマーク青:after, .チェックマーク青:before{
	content:''; 
	height:18px; 
	width:4px; 
	display:block; 
	background:#00A8FF; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}
.チェックマーク青:before{
	height:10px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg); 
	top:16px; 
	left:7px
}

/* コメント・トラックバック一覧
----------------------------------------------- */
#article-options .article-option-title {
	font-size: 17px;
	font-weight: normal;
}

#comment-form {
	font-size: 13px;
	margin: 32px 0;
}
.comment-date,
.ping-blog-name,
.ping-date {
	border-left: 1px solid #aaa;
	color: #aaa;
}
.comment-body {
	color: #666;
	font-size: 13px;
	margin-top: 5px;
}
.ping-excerpt {
	color: #666;
	margin-left: 16px;
}

#comment-form dt {
	width: 8%;
}
#comment-form dd {
	margin: 0 11%;
}
div.article-option ol {
	margin: 35px 0 0 0;
}
.comment-info, .trackback-set {
	font-size: 14px;
}
.commentEvaluation {
	float: right;
	display: block;
	margin-top: -27px;
}

/* ページ送り
----------------------------------------------- */
/* トップページ */
ul.index-navigator {
	margin: 40px 0 10px;
}
ul.index-navigator li, ul.index-navigator li ol {
	color: #d57572;
}
ul.index-navigator li a,
ul.index-navigator li.current span {
	background-color: none;
	color: #d57572;
}
ul.index-navigator li.current span {
	background-color: #d57572;
	color: #fff;
}
ul.index-navigator a:hover {
	background-color: #d57572;
	text-decoration: none;
	color: #FFF;
}
ul.index-navigator a:visited {
	color: #d57572;
}
ul.index-navigator a:visited:hover {
	color: #FFF;
}

/* 記事ページ、月別アーカイブページ */
ul.article-pager li ,
ul.archives-pager li {
	margin: 0 30px;
	padding: 20px 0 15px;
}
ul.article-pager li a,
ul.archives-pager li a {
	font-size: 14px;
	padding: 10px 30px;
	background: #F3E5E1;
	color: #000;
}
ul.article-pager li a:hover,
ul.archives-pager li a:hover {
	background: #f3d2c9 !important;
}


/* ブログのフッター
----------------------------------------------- */
#blog-footer {
	padding: 40px;
	color:#000;
	font-size: 15px;
}
#blog-footer a {
	color:#000;
}


/* ブログパーツ
----------------------------------------------- */
/* 共通 */
.sidewrapper:first-child {
	padding-top: 0;
}
.sidewrapper {
	position: relative;
	overflow: visible;
	padding: 10% 0;
	font-size: 0.95em;
}

.sidewrapper .sidetitle {
	margin-bottom: 20px;
	padding: 12px;
	background: #ffffff;
	color: #000;
	font-size: 17px;
	line-height: 1.2;
        border-left-style: solid;
        border-width: 5px;
        border-color: #87ff87;
}
.sidewrapper .sidetitle a {
	color: #333;
}
.sidewrapper .side .sidebody {
	line-height: 21px;
	margin: 0 0 7px 0;

}
.sidewrapper .side .sidebody.category-child {
	margin-left: 1em;
}

/*  カテゴリ */
.category-parent ,
.category-child {
	font-size: 14px;
}
.category-parent a ,
.category-child a {
	color: #000;
}
.category-parent:before ,
.category-child:before {
	bottom: 1px;
	content:  url(http://parts.blog.livedoor.jp/img/usr/ver06_si_classicivy_2c/list.png);
	left: 0;
	position: relative;
	width: 100%;
	margin-right: 5px;
	color: #333;
}
.category-child {
}

/* カレンダー */
.plugin-calendar_default {
	width: 280px;
}
.table.caltbl.calendartable{
	margin-top: 17px !important;
	margin-bottom: 0 !important;
}
table.caltbl {
	line-height: 1.8;
	margin: 10px auto;
	margin-bottom: 0 !important;
	width: 100%;
}
.calendarhead{
	font-weight: normal;
	font-size: 15px;
}
.calendarhead a,
.calendarhead a:hover,
.calendarhead a:visited{
}
table.caltblwk {
	width: 280px;
}
table.caltblwk .weekday {
	color: #000;
}
table.caltblwk .sun {
	color: #ff5d5d;
}
table.caltblwk .sat {
	color: #578efa;
}
table.caltblday {
	color: #000;
	border-collapse: separate;
	border-spacing: 4px;
	font-size: 13px;
	max-width: 280px;
	font-family : Arial,sans-serif ;
	width: 280px;
}
table.caltblday .caloff {
	border: 1px solid #e4e7e8;
	background-color: #fff;
}
table.caltblday .calon {
	border: 1px solid #e4e7e8;
	background-color: #d57572;
}
table.caltblday td a {
	height: 23px;
	line-height: 23px;
	color: #fff;
}
table.caltblday td a:hover {
	text-decoration: underline;
}
.caltblwkbg.calendarwd table.caltblwk{
	max-width: 270px;
}

/* その他のパーツ
----------------------------------------------- */
/* アーカイブヘッダ */
.archives-header {
	overflow: hidden;
	margin-top: 0 !important;
	margin-bottom: 40px !important;
	padding: 13px 15px;
	border-left: 15px solid #f3e5e1;
	background-color: #fff;
	color: #433434;
	font-size: 15px;
	line-height: 1.6;
	-webkit-box-shadow: 0 0 1px rgba(205,185,185,0.75);
			box-shadow: 0 0 1px rgba(205,185,185,0.75);
}

/* 記事下広告 */
#ad2 {
	padding: 40px 0 35px !important;
}
#ad2 a.addescription {
	color:#000;
}


/* 特殊機能・カスタマイズ
----------------------------------------------- */
/* かんたんタイトル画像 */
#blog-header.show-image #blog-header-inner {
	width: 100%;
}
#blog-header.show-image h1,
#blog-header.show-image #blog-description {
	margin: 0 auto;
	width: 1080px;
}
#blog-header.hide-text #blog-title a {
	background-color:#fff;
	opacity: 0;
	filter: alpha(opacity = 0);
	-webkit-transition: opacity 0.1s linear;
	   -moz-transition: opacity 0.1s linear;
		-ms-transition: opacity 0.1s linear;
		 -o-transition: opacity 0.1s linear;
			transition: opacity 0.1s linear;
}
#blog-header.hide-text #blog-title a:hover {
	opacity: 0.15;
}
#blog-header.hide-text #blog-title a, 
#blog-header.hide-text #blog-description {
    line-height: 0;
    text-indent: -99999px;
}
/* ページトップへ */
.to-pagetop a {
  background:url(http://parts.blog.livedoor.jp/img/usr/default_2012/common/to_pagetop.png) 0 0 no-repeat;
  display: block;
  width: 70px;
  height: 70px;
  text-indent:-9999px;
}
.to-pagetop a {
  opacity: 0.6;
  -webkit-transition: opacity linear 0.1s;
	 -moz-transition: opacity linear 0.1s;
	  -ms-transition: opacity linear 0.1s;
	   -o-transition: opacity linear 0.1s;
		  transition: opacity linear 0.1s;
}
.to-pagetop a:hover {
	opacity: 0.9;
}

ul#ld-services li {
	margin: 0;
}

.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* リンクの色がふわっと変わる */
a {
	transition: color .3s;
}

/* 文字の右端を揃える */
p{
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 文字の線装飾 */

.linemarker-blue {
  background: linear-gradient(transparent 70%, #b2d8ff 0%);
}

.linemarker-blue-kasen {
  background: linear-gradient(transparent 90%, #2ca9e1 100%);
}

.linemarker-red1 {
  background: linear-gradient(transparent 70%, #ffa3a3 0%);
}

.linemarker-red2 {
  background: linear-gradient(transparent 70%, #ffbcdd 0%);
}

.linemarker-red-kasen {
  background: linear-gradient(transparent 90%, #e73562 100%);
}

.linemarker-purple {
  background: linear-gradient(transparent 70%, #e0c1ff 0%);
}

.linemarker-purple-kasen {
  background: linear-gradient(transparent 90%, #841a75 100%);
}

.linemarker-pink {
  background: linear-gradient(transparent 70%, #ffb2ff 0%);
}

.linemarker-green1 {
  background: linear-gradient(transparent 70%, #b2ffb2 0%);
}

.linemarker-green2 {
  background: linear-gradient(transparent 70%, #b2ffd8 0%);
}

.linemarker-green3 {
  background: linear-gradient(transparent 70%, #d8ffb2 0%);
}

.linemarker-green4 {
  background: linear-gradient(transparent 70%, #98d98e 0%);
}

.linemarker-green-kasen {
  background: linear-gradient(transparent 90%, #00a968 100%);
}

.linemarker-orange1 {
  background: linear-gradient(transparent 70%, #ffd8b2 0%);
}

.linemarker-orange-kasen {
  background: linear-gradient(transparent 90%, #d2691e 100%);
}

.under-ten-blue {
  border-bottom: dashed 2px #87CEFA;
}

.under-ten-orange {
  border-bottom: dashed 2px #FF8000;
}

.under-double-blue {
  border-bottom: double 6px #87CEFA;
}

.under-double-orange {
  border-bottom: double 6px #FF8000;
}

/*****会話吹き出し*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
 border: 3px solid #fff; /*左のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff; /*左の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 margin-top: -8px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius:50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
 border: 3px solid #FFF; /*右のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff; /*右の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -16px;
 top: 25%;
 margin-top: -8px;
}
.talk-end{
 clear:both;
}

/* 文中Question */
.Questionbox {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.Questionbox::before {
    background-color: #fff;
    color: #da4033;
    content: "問題";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 文中例題 */
.reidaibox {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.reidaibox::before {
    background-color: #fff;
    color: #da4033;
    content: "例題";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 文中チェックポイント */
.checkpointbox {
    border: 2px solid #4333da;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.checkpointbox::before {
    background-color: #fff;
    color: #4333da;
    content: "CheckPoint！";
    font-weight: normal;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 文中注釈 */
.tyuusyakubox {
    border: 2px solid #4333da;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.tyuusyakubox::before {
    background-color: #fff;
    color: #4333da;
    content: "注釈";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 文中注意 */
.tyuuibox {
    border: 2px solid #da4033;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.tyuuibox::before {
    background-color: #fff;
    color: #da4033;
    content: "注意";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 文中重要単語 */
.jyuuyoubox {
    border: 2px solid #4333da;
    border-radius: 4px;
    margin: 2em 0;
    padding: 2em;
    position: relative;
}
.jyuuyoubox::before {
    background-color: #fff;
    color: #4333da;
    content: "重要単語チェック！";
    font-weight: bold;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 文中背景 */
.bunhaikei1{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}


/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px;
 height: 80px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%; 
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%; 
 }
 }