body {
	font-family: "メイリオ" , Meiryo , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , "Roboto Slab" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

@media screen and (min-width: 1140px) {
	#mainvisual {
		min-height: 265px;
		max-height: 350px;
		height: calc( 23.3vw );
	}
	#mainvisual .back img {
		margin: auto;
		position: absolute;
		top: 0;
		right: -50%;
		left: -50%;
		bottom: unset;
		width: 100%;
		height: auto;
		min-height: 200px;
		max-width: 1500px;
	}
	#mainvisual .front .content p {
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
	}
}

#mainvisual .back:after {
	opacity: 0.1;
	background: #0599D9;
}

.tgcolor {
	background: #0599D9;
	color: #fff;
}

table.saninsen2016 td {
	text-align:center;
}

#saninsen_top h4 {
	text-align:center;
}

a.saninsen_link {
	display:block;
	padding: 10px;
	margin: 20px 10px;
	text-align: center;
	background: #0599D9;
}

a.saninsen_link{
	color: #fff;
	text-decoration:none;
}

a.saninsen_link:hover {
	color: #fff;
	text-decoration:none;
	opacity: 0.8;
}

.img-circle {
	border-radius: 50%;
}

ul.gray {
	background: #eee;
	margin: 10px 20px;
	padding: 20px 0px 20px 40px ;

}

h1.op_stance {
	font-size: 24px;
}

#opinion-stance {
	margin-bottom: 30px;
}

#main .agree_bk {
	padding: 10px;
	background: #F4F9ED;
}

#main .against_bk {
	padding: 20px;
	background: #F4F9ED;
}

#header-utils > div {
	float: right;
}

@media only screen and (max-width: 480px) {

	.header-nav-active #global-nav {
		padding-top: 80px;
	}

	#global-nav > ul > li {
		width: 100% !important;
	}

	#global-nav > ul > li ul li a {
		padding: 15px 15px 15px 30px;
	}

	#global-nav > ul > li ul li a:before {
		content: " - ";
	}

	#opinion-stance {
		margin-bottom: 30px;
	}

	#main .agree_bk {
		padding: 10px;
		background: #F4F9ED;
	}

	#main .against_bk {
		padding: 20px;
		background: #F4F9ED;
	}

}

.post-content p {
	font-size: 16px;
}

.post-content ul li {
	font-size: 16px;
}

.post-content h2 {
	background:#0599D9;
	letter-spacing: 1px;
	color: #fff;
	font-weight: 500;
	font-size: 18px;
	border:none;
	padding: 12px;
}

.post-content h2.top {
	margin-top:0px;
}

.top {
	margin-top:0px;
}

.post-content > .inner h3 {
	border:none;	
}

.post-content > h3{
	border-bottom:3px double #0599D9;
	font-weight: 500;
	margin-top: 30px;
	font-size: 18px;
	padding: 7px 0px 7px 8px;
	letter-spacing: 2px;
}

.post-content > h4{
	border-left:5px solid #0599D9;
	margin-top: 25px;
	font-weight: 500;
	font-size: 18px;
	padding: 7px 0px 7px 12px;
}


.post-content > h3::before {
	display:none;
}


blockquote {
	font-style: italic;
}

blockquote p {
	margin-bottom: 0px;
}

.grid .col4 {
	width:33%;
}

@media only screen and (max-width: 480px) {

.two-col .grid .col4, .two-col .grid .col6 {
	width:100%;
}

#mainvisual .front .content p {
	margin-left: 40px;
	margin-right: 40px;
	font-size: 18px;
}

}

#main_top h2.headline {
	font-size: 24px;
	margin: 40px auto;
	width: 30%;
	border-bottom: 2px solid #0599D9;
	letter-spacing: 2px;
	text-align:center;
	border-left: none;
	font-weight: 600;
	padding: 10px 0;
}

.backshadow {
	padding: 20px 20px 5px 20px;
	background: #efefef;
}

h3.newspaper span {
	color: #ffffff;
	font-size: 0.8em;
	padding: 2px 10px;
	border-radius: 10px;
	margin: 10px;
}

h3.newspaper span.red {
	background-color: #f44336;
}

h3.newspaper span.orange {
	background-color: #fb8c00;
}

h3.newspaper span.yellow {
	background-color: #ffc107;
}

h3.newspaper span.lightgreen {
	background-color: #c0ca33;
}

h3.newspaper span.green {
	background-color: #7cb342;
}

.text_red {
	color: #CC3333;
}

div.post-content span.fact {
	color: #ffffff;
	font-size: 0.8em;
	padding: 0.2em 1.2em;
	border-width: 1px;
	border-radius: 1.2em;
	background-color: #ffc107;
}

div.post-content span.original {
	color: #ffffff;
	font-size: 0.8em;
	padding: 0.2em 1.2em;
	border-width: 1px;
	border-radius: 1.2em;
	background-color: #fb8c00;
}

div.post-content span.opinion {
	color: #ffffff;
	font-size: 0.8em;
	padding: 0.2em 1.2em;
	border-width: 1px;
	border-radius: 1.2em;
	background-color: #f44336;
}

div.post-content span.research {
	color: #ffffff;
	font-size: 0.8em;
	padding: 0.2em 1.2em;
	border-width: 1px;
	border-radius: 1.2em;
	background-color: #7cb342;
}

div.post-content span.advertise {
	color: #000000;
	font-size: 0.8em;
	padding: 0.2em 1.2em;
	border-width: 1px;
	border-radius: 1.2em;
	background-color: #fef4f4;
}


#mainvisual .front .content p {
	letter-spacing: 2px;
	font-weight: 600;
	text-shadow: 2px 2px 3px #cccccc;
	color: #0599D9;
}

#header {
	border: none;
	background: #0599D9;
	color: #fff;
}

#header a {
	color: #fff;
}

#footer {
	border: none;
	background: #0599D9;
	color: #fff;
	padding: 50px 0 20px;
}

#footer a {
	color: #fff;
}

#content {
	margin-bottom: 80px;
}

#global-nav {
	margin: 0;
	float: right;
	width: 75%;
}

#header-logo h1, #header-logo p {
	margin: 0;
	font-size: 100%;
	height: 65px;
}

#header-logo {
    padding-top: 7px;
    padding-bottom: 5px;
}

#global-nav > ul > li > a {
    line-height: 77px;
}

#global-nav > ul > li {
	float: left;
}

#global-nav > ul {
	margin-right: 160px;
}

@media (max-width: 480px) {
	#global-nav > ul {
		margin-right: 80px;
	}
}

#global-nav > ul > li:first-child:before {
    content: "";
}

#global-nav > ul > li:last-child:before {
    content: none;
}

#header-utils #header-account .logged-in {
    line-height: 77px;
}

#header-utils > div .handle {
    line-height: 77px;
}

#header-utils > div .handle i:before {
    line-height: 77px;
}

#header-utils > div .screen {
    height: 77px;
}

#header-utils #header-account .logged-in i:before {
    line-height: 77px;
}

#footer-logo {
    width: 250px;
}

.post-articles article .date {
	background: #0599D9;
}

.post-articles article .date .year {
	color: #fff;
}

body {
	background: #f6f6f6;
}

#pagetop {
	background: #0599D9;
}

#pagetop:before {
	background: transparent;
}

#pagetop:hover {
	background: #6CA5D9;
}

.post-articles article .article-title {
	letter-spacing: 1px;
	font-size: 18px;
	line-height: 24px;
}

.post-articles.sc article .article-title {
	letter-spacing: 1px;
	font-size: 14px;
	line-height: 20px;
	color: #030303;
	background-color: #ffffff;
}

.post-header h1 {
	font-weight: 500;
	font-size: 28px;
	line-height: 34px;
	letter-spacing: 1px;
}

.post-header .meta .date {
    background: #0599D9;
}

.post-header .meta .date .year {
    color: #dddddd;
}

.no-touch #global-nav ul li:hover {
	background: #6CA5D9;
}

.no-touch #global-nav ul li:hover:before, .no-touch #global-nav ul li:hover:after {
	border-color: #6CA5D9;
}

.no-touch #global-nav ul a:hover {
	background: #6CA5D9;
}

#header-utils #header-search .screen .content .input-field input {
	border-bottom: 1px solid #6CA5D9;
}

#header-utils #header-account .screen .content .login .lostpassword a {
	color: #6CA5D9;
}

.no-touch #header-utils > div .handle:hover {
	background: #6CA5D9;
}

.no-touch #header-utils #header-search .screen .content .button-field button:hover {
	color: #6CA5D9;
}

.no-touch #header-utils #header-account:hover {
	background: #6CA5D9;
}

.no-touch #header-utils #header-account:hover > ul a:hover {
	background: #6CA5D9;
}

.header-nav-active #header-utils #header-nav-handle button {
	background: #6CA5D9;
}

.post-header .meta .category a:hover, .post-header .meta .tag a:hover {
	color: #6CA5D9;
}

.post-categories article a:hover {
	background: #6CA5D9;
}

.wp-pagenavi a:after {
	background: #6CA5D9;
}

.wp-pagenavi .current:after {
	background: #6CA5D9;
}

#side .widget ul li:before {
	color: #6CA5D9;
}

#side .widget .widget-rss li a:hover .rss-title {
	color: #6CA5D9;
}

#pagetop a:hover {
	background: transparent;
}

.btn, .post-comments form .form-submit input {
	background: #6CA5D9;
}

#opinion-socials li a:hover, #opinion-socials li a:focus {
	background: #6CA5D9;
}

#opinion-stance .item .cell.has-stance:hover {
	background: #6CA5D9;
}

#opinion-stance .item .button .toggle .track span.favor {
	background: #6CA5D9;
}

.no-touch a:hover {
	color: #6CA5D9;
}

.buttonarea .mvbutton {
	max-width: 45%;
	padding: 5px;
	font-size: 1.2em;
	display: block;
	height: 98px;
}

.buttonarea .disable {
	color: #efefef;
}

.buttonarea .mvbutton a {
	color: #0599D9;
}

.buttonarea .mvbutton a:hover {
	color: #6CA5D9;
}

.buttonarea .mvbutton a div.icon {
	padding: 0.5em;
	background: #0599D9;
	color: #efefef;
}

.buttonarea .mvbutton a div.txt {
	padding: 0.7em;
	background: #efefef;
	color: #0599D9;
	height: 88px;
}

.buttonarea .mvbutton a:hover div.txt {
	background: #f9f9f9;
	color: #6CA5D9;
}

.buttonarea .mvbutton a:hover div.icon {
	background: #6CA5D9;
	color: #f9f9f9;
}

.buttonarea .disable div.icon {
	vertical-align: middle;
	display: table-cell;
	padding: 0.5em;
	background: #909090;
	color: #efefef;
}

.buttonarea .disable div.txt {
	vertical-align: middle;
	display: table-cell;
	padding: 0.7em;
	background: #efefef;
	color: #909090;
}

.buttonarea .next {
	float: left;
	margin: 10px 10px 10px 5px;
}

.buttonarea .next:after {
	content: "";
	display: block;
	clear: both;
}

.buttonarea .next a div {
	vertical-align: middle;
	display: table-cell;
}

.buttonarea .prev {
	float: right;
	margin: 10px 5px 10px 10px;
}

.buttonarea .prev:after {
	content: "";
	display: block;
	clear: both;
}

.buttonarea .prev a div {
	vertical-align: middle;
	display: table-cell;
}

.buttonarea:after {
	content: "";
	clear: both;
	display: block;
}

@media only screen and (max-width: 480px) {
	#header-logo h1 a img {
		width: 50%;
		height: auto;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}
	
	#header-logo {
		background: #0599d9;
	}
	
	#main_top h2.headline {
		width: 60%;
	}
}

/* 吹き出し用CSS開始 */

.balloon, .balloon p {
	font-size: 18px;
}

/* PC・タブレット用設定 */
@media screen and (min-width: 481px) {
/* 右向き 枠なし 吹き出し本体 */
	.balloon.r.off{
		position: relative;
		padding: 20px;
		border-radius: 10px;
		color: #ffffff;
		background-color: #0888ff;
		margin-left: 120px;
		margin-top: 20px;
		margin-bottom: 30px;
		min-height: 100px;
	}


/* 右向き 枠なし 三角アイコン */
	.balloon.r.off::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: -15px;
		top: 33px;
		border-right: 15px solid #0888ff;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
	.balloon.r .icon.off{
		position: absolute;
		left: -115px;
		top: 0;
		border-radius: 50%;
		background: #0888ff;
	}

	.balloon.r .icon.off img{
		width: 90px;
		height: 90px;
		border-radius: 50%;
	}


/* 左向き 枠なし 吹き出し本体 */
	.balloon.l.off{
		position: relative;
		padding: 20px;
		border-radius: 10px;
		color: #ffffff;
		background-color: #0888ff;
		margin-right: 120px;
		margin-top: 20px;
		margin-bottom: 30px;
		min-height: 100px;
	}

/* 左向き 枠なし 三角アイコン */
	.balloon.l.off::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: -15px;
		top: 33px;
		border-left: 15px solid #0888ff;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
	.balloon.l .icon.off{
		position: absolute;
		right: -115px;
		top: 0;
		border-radius: 50%;
		background: #0888ff;
	}

	.balloon.l .icon.off img{
		width: 90px;
		height: 90px;
		border-radius: 50%;
	}


/* 右向き 枠あり 吹き出し本体 */
	.balloon.r.on{
		position: relative;
		padding: 20px;
		border-radius: 10px;
		color: #060606;
		background-color: #ffadad;
		border: 2px solid #ca8888;
		margin-left: 120px;
		margin-top: 20px;
		margin-bottom: 30px;
		min-height: 100px;
	}

/* 右向き 枠あり 三角アイコン */
	.balloon.r.on::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: -15px;
		top: 33px;
		border-right: 15px solid #ca8888;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

	.balloon.r.on::after{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: -12px;
		top: 33px;
		border-right: 15px solid #ffadad;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
	.balloon.r .icon.on{
		position: absolute;
		left: -115px;
		top: 0;
		border-radius: 50%;
		background: #ffadad;
		border: 2px solid #ca8888;
	}

	.balloon.r .icon.on img{
		width: 86px;
		height: 86px;
		border-radius: 50%;
	}


/* 左向き 枠あり 吹き出し本体 */
	.balloon.l.on{
		position: relative;
		padding: 20px;
		border-radius: 10px;
		color: #060606;
		background-color: #ffadad;
		border: 2px solid #ca8888;
		margin-right: 120px;
		margin-top: 20px;
		margin-bottom: 30px;
		min-height: 100px;
	}

/* 左向き 枠あり 三角アイコン */
	.balloon.l.on::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: -15px;
		top: 33px;
		border-left: 15px solid #ca8888;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

	.balloon.l.on::after{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: -12px;
		top: 33px;
		border-left: 15px solid #ffadad;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
	.balloon.l .icon.on{
		position: absolute;
		right: -115px;
		top: 0;
		background: #ffadad;
		border: solid 2px #ca8888;
		border-radius: 50%;
	}

	.balloon.l .icon.on img{
		width: 86px;
		height: 86px;
		border-radius: 50%;
	}

/* 右向き 名前キャプション 絶対配置でアイコンの下に配置 */
	.balloon.r .name {
		width: 90px;
		font-size: 15px;
		letter-spacing: -1px;
		float: left;
		display: table-cell;
		position: absolute;
		top: 95px;
		left: -115px;
		text-align: center;
	}

/* 左向き 名前キャプション 絶対配置でアイコンの下に配置 */
	.balloon.l .name {
		width: 90px;
		font-size: 15px;
		letter-spacing: -1px;
		float: right;
		display: table-cell;
		position: absolute;
		top: 95px;
		right: -115px;
		text-align: center;
	}
	
	.balloon .name.charaname-small {
		font-size: 12px;
	}
}

/* スマホ用設定 */
@media screen and (max-width: 480px) {
/* 右向き 枠なし 吹き出し本体 */
	.balloon.r.off{
		position: relative;
		padding: 0.5em;
		border-radius: 10px;
		color: #ffffff;
		background-color: #0888ff;
		margin-left: calc(20%);
		margin-top: 10px;
		margin-bottom: 20px;
		min-height: 100px;
	}


/* 右向き 枠なし 三角アイコン */
	.balloon.r.off::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: calc(-2vw);
		top: calc(4vw);
		border-right: calc(2vw) solid #0888ff;
		border-top: calc(2vw) solid transparent;
		border-bottom: calc(2vw) solid transparent;
	}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
	.balloon.r .icon.off{
		position: absolute;
		left: calc(-25%);
		top: 0;
		border-radius: 50%;
		background: #0888ff;
		width: calc(20%);
	}

	.balloon.r .icon.off img{
		border-radius: 50%;
	}


/* 左向き 枠なし 吹き出し本体 */
	.balloon.l.off{
		position: relative;
		padding: 0.5em;
		border-radius: 10px;
		color: #ffffff;
		background-color: #0888ff;
		margin-right: calc(20%);
		margin-top: 10px;
		margin-bottom: 20px;
		min-height: 100px;
	}

/* 左向き 枠なし 三角アイコン */
	.balloon.l.off::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: calc(-2vw);
		top: calc(4vw);
		border-left: calc(2vw) solid #0888ff;
		border-top: calc(2vw) solid transparent;
		border-bottom: calc(2vw) solid transparent;
	}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
	.balloon.l .icon.off{
		position: absolute;
		right: calc(-25%);
		top: 0;
		border-radius: 50%;
		background: #0888ff;
		width: calc(20%);
	}

	.balloon.l .icon.off img{
		border-radius: 50%;
	}


/* 右向き 枠あり 吹き出し本体 */
	.balloon.r.on{
		position: relative;
		padding: 0.5em;
		border-radius: 10px;
		color: #060606;
		background-color: #ffadad;
		border: 2px solid #ca8888;
		margin-left: calc(20%);
		margin-top: 10px;
		margin-bottom: 20px;
		min-height: 100px;
	}

/* 右向き 枠あり 三角アイコン */
	.balloon.r.on::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: calc(-2vw);
		top: calc(4vw);
		border-right: calc(2vw) solid #ca8888;
		border-top: calc(2vw) solid transparent;
		border-bottom: calc(2vw) solid transparent;
	}

	.balloon.r.on::after{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		left: calc(-2vw + 3px);
		top: calc(4vw);
		border-right: calc(2vw) solid #ffadad;
		border-top: calc(2vw) solid transparent;
		border-bottom: calc(2vw) solid transparent;
	}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
	.balloon.r .icon.on{
		position: absolute;
		left: calc(-25%);
		top: 0;
		border-radius: 50%;
		background: #ffadad;
		border: 2px solid #ca8888;
		width: calc(20%);
	}

	.balloon.r .icon.on img{
		border-radius: 50%;
	}


/* 左向き 枠あり 吹き出し本体 */
	.balloon.l.on{
		position: relative;
		padding: 0.5em;
		border-radius: 10px;
		color: #060606;
		background-color: #ffadad;
		border: 2px solid #ca8888;
		margin-right: calc(20%);
		margin-top: 10px;
		margin-bottom: 20px;
		min-height: 100px;
	}

/* 左向き 枠あり 三角アイコン */
	.balloon.l.on::before{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: calc(-2vw);
		top: calc(4vw);
		border-left: calc(2vw) solid #ca8888;
		border-top: calc(2vw) solid transparent;
		border-bottom: calc(2vw) solid transparent;
	}

	.balloon.l.on::after{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		right: calc(-2vw + 3px);
		top: calc(4vw);
		border-left: calc(2vw) solid #ffadad;
		border-top: calc(2vw) solid transparent;
		border-bottom: calc(2vw) solid transparent;
	}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
	.balloon.l .icon.on{
		position: absolute;
		right: calc(-25%);
		top: 0;
		background: #ffadad;
		border: solid 2px #ca8888;
		border-radius: 50%;
		width: calc(20%);
	}

	.balloon.l .icon.on img{
		border-radius: 50%;
	}

/* 右向き 名前キャプション 絶対配置でアイコンの下に配置 */
	.balloon.r .name {
		width: calc(20%);
		font-size: 11px;
		letter-spacing: -1px;
		float: left;
		display: table-cell;
		position: absolute;
		top: calc(16vw);
		left: calc(-25%);
		text-align: center;
	}

/* 左向き 名前キャプション 絶対配置でアイコンの下に配置 */
	.balloon.l .name {
		width: calc(20%);
		font-size: 11px;
		letter-spacing: -1px;
		float: right;
		display: table-cell;
		position: absolute;
		top: calc(16vw);
		right: calc(-25%);
		text-align: center;
	}

	.balloon .name.charaname-small {
		width: calc(23%);
		font-size: 8px;
	}

	.balloon.r .name.charaname-small {
		left: calc(-26%);
	}

	.balloon.l .name.charaname-small {
		right: calc(-26%);
	}

}

/* 吹き出しカラーバリエーション */
/* カラーバリエーション white */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.white{
	color: #060606;
	background-color: #ffffff;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) { 
	.balloon.r.off.white::before{
		border-right: 15px solid #ffffff;
	}
}

@media screen and (max-width: 480px) { 
	.balloon.r.off.white::before{
		border-right: calc(2vw) solid #ffffff;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.white{
	background: #ffffff;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.white{
	color: #060606;
	background-color: #ffffff;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) { 
	.balloon.l.off.white::before{
		border-left: 15px solid #ffffff;
	}
}

@media screen and (max-width: 480px) { 
	.balloon.l.off.white::before{
		border-left: calc(2vw) solid #ffffff;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.white{
	background: #ffffff;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.white{
	color: #060606;
	background-color: #ffffff;
	border: 2px solid #000000;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.white::before{
		border-right: 15px solid #000000;
	}

	.balloon.r.on.white::after{
		border-right: 15px solid #ffffff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.white::before{
		border-right: calc(2vw) solid #000000;
	}

	.balloon.r.on.white::after{
		border-right: calc(2vw) solid #ffffff;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.white{
	background: #ffffff;
	border: 2px solid #000000;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.white{
	color: #060606;
	background-color: #ffffff;
	border: 2px solid #000000;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.white::before{
		border-left: 15px solid #000000;
	}

	.balloon.l.on.white::after{
		border-left: 15px solid #ffffff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.white::before{
		border-left: calc(2vw) solid #000000;
	}

	.balloon.l.on.white::after{
		border-left: calc(2vw) solid #ffffff;
	}
}


/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.white{
	background: #ffffff;
	border: solid 2px #000000;
}

/* カラーバリエーション gray */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.gray{
	color: #060606;
	background-color: #f5f5f5;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.gray::before{
		border-right: 15px solid #f5f5f5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.gray::before{
		border-right: calc(2vw) solid #f5f5f5;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.gray{
	background: #f5f5f5;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.gray{
	color: #060606;
	background-color: #f5f5f5;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.gray::before{
		border-left: 15px solid #f5f5f5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.gray::before{
		border-left: calc(2vw) solid #f5f5f5;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.gray{
	background: #f5f5f5;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.gray{
	color: #060606;
	background-color: #f5f5f5;
	border: 2px solid #d3d3d3;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.gray::before{
		border-right: 15px solid #d3d3d3;
	}

	.balloon.r.on.gray::after{
		border-right: 15px solid #f5f5f5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.gray::before{
		border-right: calc(2vw) solid #d3d3d3;
	}

	.balloon.r.on.gray::after{
		border-right: calc(2vw) solid #f5f5f5;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.gray{
	background: #f5f5f5;
	border: 2px solid #d3d3d3;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.gray{
	color: #060606;
	background-color: #f5f5f5;
	border: 2px solid #d3d3d3;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.gray::before{
		border-left: 15px solid #d3d3d3;
	}

	.balloon.l.on.gray::after{
		border-left: 15px solid #f5f5f5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.gray::before{
		border-left: calc(2vw) solid #d3d3d3;
	}

	.balloon.l.on.gray::after{
		border-left: calc(2vw) solid #f5f5f5;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.gray{
	background: #f5f5f5;
	border: solid 2px #d3d3d3;
}

/* カラーバリエーション red */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.red{
	color: #060606;
	background-color: #ffccd5;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.red::before{
		border-right: 15px solid #ffccd5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.red::before{
		border-right: calc(2vw) solid #ffccd5;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.red{
	background: #ffccd5;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.red{
	color: #060606;
	background-color: #ffccd5;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.red::before{
		border-left: 15px solid #ffccd5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.red::before{
		border-left: calc(2vw) solid #ffccd5;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.red{
	background: #ffccd5;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.red{
	color: #060606;
	background-color: #ffccd5;
	border: 2px solid #ff002b;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.red::before{
		border-right: 15px solid #ff002b;
	}

	.balloon.r.on.red::after{
		border-right: 15px solid #ffccd5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.red::before{
		border-right: calc(2vw) solid #ff002b;
	}

	.balloon.r.on.red::after{
		border-right: calc(2vw) solid #ffccd5;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.red{
	background: #ffccd5;
	border: 2px solid #ff002b;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.red{
	color: #060606;
	background-color: #ffccd5;
	border: 2px solid #ff002b;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.red::before{
		border-left: 15px solid #ff002b;
	}

	.balloon.l.on.red::after{
		border-left: 15px solid #ffccd5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.red::before{
		border-left: calc(2vw) solid #ff002b;
	}

	.balloon.l.on.red::after{
		border-left: calc(2vw) solid #ffccd5;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.red{
	background: #ffccd5;
	border: solid 2px #ff002b;
}

/* カラーバリエーション blue */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.blue{
	color: #060606;
	background-color: #b3e8ff;
}

/* 右向き 枠なし 三角アイコン */
.balloon.r.off.blue::before{
	border-right: 15px solid #b3e8ff;
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.blue{
	background: #b3e8ff;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.blue{
	color: #060606;
	background-color: #b3e8ff;
}

/* 左向き 枠なし 三角アイコン */
.balloon.l.off.blue::before{
	border-left: 15px solid #b3e8ff;
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.blue{
	background: #b3e8ff;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.blue{
	color: #060606;
	background-color: #b3e8ff;
	border: 2px solid #0599d9;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.blue::before{
		border-right: 15px solid #0599d9;
	}

	.balloon.r.on.blue::after{
		border-right: 15px solid #b3e8ff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.blue::before{
		border-right: calc(2vw) solid #0599d9;
	}

	.balloon.r.on.blue::after{
		border-right: calc(2vw) solid #b3e8ff;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.blue{
	background: #b3e8ff;
	border: 2px solid #0599d9;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.blue{
	color: #060606;
	background-color: #b3e8ff;
	border: 2px solid #0599d9;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.blue::before{
		border-left: 15px solid #0599d9;
	}

	.balloon.l.on.blue::after{
		border-left: 15px solid #b3e8ff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.blue::before{
		border-left: calc(2vw) solid #0599d9;
	}

	.balloon.l.on.blue::after{
		border-left: calc(2vw) solid #b3e8ff;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.blue{
	background: #b3e8ff;
	border: solid 2px #0599d9;
}

/* カラーバリエーション green */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.green{
	color: #060606;
	background-color: #b8e6b8;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.green::before{
		border-right: 15px solid #b8e6b8;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.green::before{
		border-right: calc(2vw) solid #b8e6b8;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.green{
	background: #b8e6b8;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.green{
	color: #060606;
	background-color: #b8e6b8;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.green::before{
		border-left: 15px solid #b8e6b8;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.green::before{
		border-left: calc(2vw) solid #b8e6b8;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.green{
	background: #b8e6b8;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.green{
	color: #060606;
	background-color: #b8e6b8;
	border: 2px solid #0d800d;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.green::before{
		border-right: 15px solid #0d800d;
	}

	.balloon.r.on.green::after{
		border-right: 15px solid #b8e6b8;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.green::before{
		border-right: calc(2vw) solid #0d800d;
	}

	.balloon.r.on.green::after{
		border-right: calc(2vw) solid #b8e6b8;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.green{
	background: #b8e6b8;
	border: 2px solid #0d800d;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.green{
	color: #060606;
	background-color: #b8e6b8;
	border: 2px solid #0d800d;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.green::before{
		border-left: 15px solid #0d800d;
	}

	.balloon.l.on.green::after{
		border-left: 15px solid #b8e6b8;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.green::before{
		border-left: calc(2vw) solid #0d800d;
	}

	.balloon.l.on.green::after{
		border-left: calc(2vw) solid #b8e6b8;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.green{
	background: #b8e6b8;
	border: solid 2px #0d800d;
}

/* カラーバリエーション yellow */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.yellow{
	color: #060606;
	background-color: #ffffb3;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.yellow::before{
		border-right: 15px solid #ffffb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.yellow::before{
		border-right: calc(2vw) solid #ffffb3;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.yellow{
	background: #ffffb3;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.yellow{
	color: #060606;
	background-color: #ffffb3;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.yellow::before{
		border-left: 15px solid #ffffb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.yellow::before{
		border-left: calc(2vw) solid #ffffb3;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.yellow{
	background: #ffffb3;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.yellow{
	color: #060606;
	background-color: #ffffb3;
	border: 2px solid #ffff33;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.yellow::before{
		border-right: 15px solid #ffff33;
	}

	.balloon.r.on.yellow::after{
		border-right: 15px solid #ffffb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.yellow::before{
		border-right: calc(2vw) solid #ffff33;
	}

	.balloon.r.on.yellow::after{
		border-right: calc(2vw) solid #ffffb3;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.yellow{
	background: #ffffb3;
	border: 2px solid #ffff33;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.yellow{
	color: #060606;
	background-color: #ffffb3;
	border: 2px solid #ffff33;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.yellow::before{
		border-left: 15px solid #ffff33;
	}

	.balloon.l.on.yellow::after{
		border-left: 15px solid #ffffb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.yellow::before{
		border-left: calc(2vw) solid #ffff33;
	}

	.balloon.l.on.yellow::after{
		border-left: calc(2vw) solid #ffffb3;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.yellow{
	background: #ffffb3;
	border: solid 2px #ffff33;
}

/* カラーバリエーション lgreen */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.lgreen{
	color: #060606;
	background-color: #f3ffe6;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.lgreen::before{
		border-right: 15px solid #f3ffe6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.lgreen::before{
		border-right: calc(2vw) solid #f3ffe6;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.lgreen{
	background: #f3ffe6;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.lgreen{
	color: #060606;
	background-color: #f3ffe6;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.lgreen::before{
		border-left: 15px solid #f3ffe6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.lgreen::before{
		border-left: calc(2vw) solid #f3ffe6;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.lgreen{
	background: #f3ffe6;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.lgreen{
	color: #060606;
	background-color: #f3ffe6;
	border: 2px solid #70cc14;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.lgreen::before{
		border-right: 15px solid #70cc14;
	}

	.balloon.r.on.lgreen::after{
		border-right: 15px solid #f3ffe6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.lgreen::before{
		border-right: calc(2vw) solid #70cc14;
	}

	.balloon.r.on.lgreen::after{
		border-right: calc(2vw) solid #f3ffe6;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.lgreen{
	background: #f3ffe6;
	border: 2px solid #70cc14;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.lgreen{
	color: #060606;
	background-color: #f3ffe6;
	border: 2px solid #70cc14;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.lgreen::before{
		border-left: 15px solid #70cc14;
	}

	.balloon.l.on.lgreen::after{
		border-left: 15px solid #f3ffe6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.lgreen::before{
		border-left: calc(2vw) solid #70cc14;
	}

	.balloon.l.on.lgreen::after{
		border-left: calc(2vw) solid #f3ffe6;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.lgreen{
	background: #f3ffe6;
	border: solid 2px #70cc14;
}

/* カラーバリエーション pink */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.pink{
	color: #060606;
	background-color: #ffcce6;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.pink::before{
		border-right: 15px solid #ffcce6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.pink::before{
		border-right: calc(2vw) solid #ffcce6;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.pink{
	background: #ffcce6;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.pink{
	color: #060606;
	background-color: #ffcce6;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.pink::before{
		border-left: 15px solid #ffcce6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.pink::before{
		border-left: calc(2vw) solid #ffcce6;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.pink{
	background: #ffcce6;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.pink{
	color: #060606;
	background-color: #ffcce6;
	border: 2px solid #ff3399;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.pink::before{
		border-right: 15px solid #ff3399;
	}

	.balloon.r.on.pink::after{
		border-right: 15px solid #ffcce6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.pink::before{
		border-right: calc(2vw) solid #ff3399;
	}

	.balloon.r.on.pink::after{
		border-right: calc(2vw) solid #ffcce6;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.pink{
	background: #ffcce6;
	border: 2px solid #ff3399;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.pink{
	color: #060606;
	background-color: #ffcce6;
	border: 2px solid #ff3399;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.pink::before{
		border-left: 15px solid #ff3399;
	}

	.balloon.l.on.pink::after{
		border-left: 15px solid #ffcce6;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.pink::before{
		border-left: calc(2vw) solid #ff3399;
	}

	.balloon.l.on.pink::after{
		border-left: calc(2vw) solid #ffcce6;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.pink{
	background: #ffcce6;
	border: solid 2px #ff3399;
}

/* カラーバリエーション purple */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.purple{
	color: #060606;
	background-color: #e6ccff;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.purple::before{
		border-right: 15px solid #e6ccff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.purple::before{
		border-right: calc(2vw) solid #e6ccff;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.purple{
	background: #e6ccff;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.purple{
	color: #060606;
	background-color: #e6ccff;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.purple::before{
		border-left: 15px solid #e6ccff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.purple::before{
		border-left: calc(2vw) solid #e6ccff;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.purple{
	background: #e6ccff;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.purple{
	color: #060606;
	background-color: #e6ccff;
	border: 2px solid #a94dff;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.purple::before{
		border-right: 15px solid #a94dff;
	}

	.balloon.r.on.purple::after{
		border-right: 15px solid #e6ccff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.purple::before{
		border-right: calc(2vw) solid #a94dff;
	}

	.balloon.r.on.purple::after{
		border-right: calc(2vw) solid #e6ccff;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.purple{
	background: #e6ccff;
	border: 2px solid #a94dff;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.purple{
	color: #060606;
	background-color: #e6ccff;
	border: 2px solid #a94dff;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.purple::before{
		border-left: 15px solid #a94dff;
	}

	.balloon.l.on.purple::after{
		border-left: 15px solid #e6ccff;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.purple::before{
		border-left: calc(2vw) solid #a94dff;
	}

	.balloon.l.on.purple::after{
		border-left: calc(2vw) solid #e6ccff;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.purple{
	background: #e6ccff;
	border: solid 2px #a94dff;
}

/* カラーバリエーション orange */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.orange{
	color: #060606;
	background-color: #ffbeb3;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.orange::before{
		border-right: 15px solid #ffbeb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.orange::before{
		border-right: calc(2vw) solid #ffbeb3;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.orange{
	background: #ffbeb3;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.orange{
	color: #060606;
	background-color: #ffbeb3;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.orange::before{
		border-left: 15px solid #ffbeb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.orange::before{
		border-left: calc(2vw) solid #ffbeb3;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.orange{
	background: #ffbeb3;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.orange{
	color: #060606;
	background-color: #ffbeb3;
	border: 2px solid #ff6a4d;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.orange::before{
		border-right: 15px solid #ff6a4d;
	}

	.balloon.r.on.orange::after{
		border-right: 15px solid #ffbeb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.orange::before{
		border-right: calc(2vw) solid #ff6a4d;
	}

	.balloon.r.on.orange::after{
		border-right: calc(2vw) solid #ffbeb3;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.orange{
	background: #ffbeb3;
	border: 2px solid #ff6a4d;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.orange{
	color: #060606;
	background-color: #ffbeb3;
	border: 2px solid #ff6a4d;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.orange::before{
		border-left: 15px solid #ff6a4d;
	}

	.balloon.l.on.orange::after{
		border-left: 15px solid #ffbeb3;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.orange::before{
		border-left: calc(2vw) solid #ff6a4d;
	}

	.balloon.l.on.orange::after{
		border-left: calc(2vw) solid #ffbeb3;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.orange{
	background: #ffbeb3;
	border: solid 2px #ff6a4d;
}

/* カラーバリエーション navy */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.navy{
	color: #060606;
	background-color: #e6e6fa;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.navy::before{
		border-right: 15px solid #e6e6fa;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.navy::before{
		border-right: calc(2vw) solid #e6e6fa;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.navy{
	background: #e6e6fa;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.navy{
	color: #060606;
	background-color: #e6e6fa;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.navy::before{
		border-left: 15px solid #e6e6fa;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.navy::before{
		border-left: calc(2vw) solid #e6e6fa;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.navy{
	background: #e6e6fa;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.navy{
	color: #060606;
	background-color: #e6e6fa;
	border: 2px solid #000080;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.navy::before{
		border-right: 15px solid #000080;
	}

	.balloon.r.on.navy::after{
		border-right: 15px solid #e6e6fa;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.navy::before{
		border-right: calc(2vw) solid #000080;
	}

	.balloon.r.on.navy::after{
		border-right: calc(2vw) solid #e6e6fa;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.navy{
	background: #e6e6fa;
	border: 2px solid #000080;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.navy{
	color: #060606;
	background-color: #e6e6fa;
	border: 2px solid #000080;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.navy::before{
		border-left: 15px solid #000080;
	}

	.balloon.l.on.navy::after{
		border-left: 15px solid #e6e6fa;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.navy::before{
		border-left: calc(2vw) solid #000080;
	}

	.balloon.l.on.navy::after{
		border-left: calc(2vw) solid #e6e6fa;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.navy{
	background: #e6e6fa;
	border: solid 2px #000080;
}

/* カラーバリエーション brown */
/* 右向き 枠なし 吹き出し本体 */
.balloon.r.off.brown{
	color: #060606;
	background-color: #ffe4b5;
}

/* 右向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.off.brown::before{
		border-right: 15px solid #ffe4b5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.off.brown::before{
		border-right: calc(2vw) solid #ffe4b5;
	}
}

/* 右向き 枠なし 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.off.brown{
	background: #ffe4b5;
}

/* 左向き 枠なし 吹き出し本体 */
.balloon.l.off.brown{
	color: #060606;
	background-color: #ffe4b5;
}

/* 左向き 枠なし 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.off.brown::before{
		border-left: 15px solid #ffe4b5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.off.brown::before{
		border-left: calc(2vw) solid #ffe4b5;
	}
}

/* 左向き 枠なし 画像 - 絶対配置で右上に配置 */
.balloon.l .icon.off.brown{
	background: #ffe4b5;
}

/* 右向き 枠あり 吹き出し本体 */
.balloon.r.on.brown{
	color: #060606;
	background-color: #ffe4b5;
	border: 2px solid #d2691e;
}

/* 右向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.r.on.brown::before{
		border-right: 15px solid #d2691e;
	}

	.balloon.r.on.brown::after{
		border-right: 15px solid #ffe4b5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.r.on.brown::before{
		border-right: calc(2vw) solid #d2691e;
	}

	.balloon.r.on.brown::after{
		border-right: calc(2vw) solid #ffe4b5;
	}
}

/* 右向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.r .icon.on.brown{
	background: #ffe4b5;
	border: 2px solid #d2691e;
}

/* 左向き 枠あり 吹き出し本体 */
.balloon.l.on.brown{
	color: #060606;
	background-color: #ffe4b5;
	border: 2px solid #d2691e;
}

/* 左向き 枠あり 三角アイコン */
@media screen and (min-width: 481px) {
	.balloon.l.on.brown::before{
		border-left: 15px solid #d2691e;
	}

	.balloon.l.on.brown::after{
		border-left: 15px solid #ffe4b5;
	}
}

@media screen and (max-width: 480px) {
	.balloon.l.on.brown::before{
		border-left: calc(2vw) solid #d2691e;
	}

	.balloon.l.on.brown::after{
		border-left: calc(2vw) solid #ffe4b5;
	}
}

/* 左向き 枠あり 画像 - 絶対配置で左上に配置 */
.balloon.l .icon.on.brown{
	background: #ffe4b5;
	border: solid 2px #d2691e;
}



/* PC・タブレット用吹き出し内引用デザイン */
@media screen and (min-width: 481px) {
	.balloon blockquote {
		margin: 8px 1em;
		background: #f3f3f3;
	}

	.balloon blockquote:before, .balloon blockquote:after {
		font-size: 6px;
	}

	.balloon.white blockquote:before, .balloon.white blockquote:after,
	.balloon.lgreen blockquote:before, .balloon.lgreen blockquote:after,
	.balloon.yellow blockquote:before, .balloon.yellow blockquote:after {
		color: #d6d6d6;
	}

	.balloon.gray blockquote:before, .balloon.gray blockquote:after,
	.balloon.red blockquote:before, .balloon.red blockquote:after,
	.balloon.blue blockquote:before, .balloon.blue blockquote:after,
	.balloon.green blockquote:before, .balloon.green blockquote:after,
	.balloon.orange blockquote:before, .balloon.orange blockquote:after,
	.balloon.pink blockquote:before, .balloon.pink blockquote:after,
	.balloon.purple blockquote:before, .balloon.purple blockquote:after {
		color: #f8f8f8;
	}
}

/* スマホ用吹き出し内引用デザイン */
@media screen and (max-width: 480px) {
	.balloon blockquote {
		margin: 8px 0.2em;
		background: #f3f3f3;
	}

	.balloon blockquote:before, .balloon blockquote:after {
		content: "";
	}
}

@media screen and (min-width: 481px) and (max-width: 1139px) {
	#mainvisual {
		height: calc(23.3vw);
		max-height: 265px;
	}
	#mainvisual .back.sp img {
		width: inherit;
		position: absolute;
		top: 0;
	}

	#mainvisual .front .content > *:first-child {
		margin-top: 0;
		position: absolute;
		top: 15%;
		left: 0;
		right: 0;
	}
}

@media screen and (min-width: 380px) and (max-width: 480px) {
	#mainvisual {
		height: 150px;
	}
	#mainvisual .back.sp img {
		width: 100%;
		position: absolute;
		top: -100%;
	}

	#mainvisual .front .content > *:first-child {
		margin-top: 0;
		position: absolute;
		top: 10%;
		left: 0;
		right: 0;
	}
}

@media screen and (min-width: 321px) and (max-width: 381px) {
	#mainvisual {
		height: 130px;
	}
	#mainvisual .back.sp img {
		width: 100%;
		position: absolute;
		top: -100%;
	}

	#mainvisual .front .content > *:first-child {
		margin-top: 0;
		position: absolute;
		top: 8%;
		left: 0;
		right: 0;
	}
}

@media screen and (max-width: 320px) {
	#mainvisual {
		height: 112px;
	}
	#mainvisual .back.sp img {
		width: 100%;
		position: absolute;
		top: -100%;
	}

	#mainvisual .front .content > *:first-child {
		margin-top: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

.post-articles article .date {
	top: 20px;
	font-size: 20px;
}

@media only screen and (max-width: 480px){
	.grid .col4, .grid .col6 {
		width: 50%;
		height: 260px;
	}

	.grid .grid-item{
		padding: 5px;
		float: left;
	}

	.post-articles article a{
		padding: 10px;
	}

	.post-articles article .description{
		display: none;
	}

	.post-articles article .article-title{
		letter-spacing: 0.5px;
		font-size: 14px;
		line-height: 18px;
	}
}

@media only screen and (max-width: 480px){
	.buttonarea .mvbutton{
		font-size: 12px;
		height: 70px;
	}

	.buttonarea .mvbutton a div.txt{
		height: 60px;
	}
}

/*
@media only screen and (max-width: 480px) {
	#mainvisual{
		display: none !important;
	}
}
*/

/* 黒板文字表示用 */
.thumimg.bs-on {
	position: relative;
}

.thumimg.bs-on img {
	position: absolute;
}

.thumimg.bs-on .bb-overlay {
	position: relative;
	top: 0;
}

.thumimg.bs-on .bb-overlay:before {
	content: "";
	display: block;
	padding-top: 20%;
}

.thumimg.bs-on .bb-overlay:after {
	content: "";
	display: block;
	padding-top: 20%;
}

.thumimg.bs-on .bb-overlay div.overlay-string {
	font-size: 1.3em;
	font-weight: 700;
	color: #FFFFFF;
}

.thumimg.bs-on .bb-overlay.bs-nochar div.overlay-string {
	display: none;
}


/* キャラクターごとの表示位置調整 */
/*
.thumimg.bs-on .bb-overlay.bs-kei {
	padding: 20% 37% 20% 12%;
}

.thumimg.bs-on .bb-overlay.bs-mai {
	padding: 20% 37% 20% 12%;
}

.thumimg.bs-on .bb-overlay.bs-asahi {
	padding: 20% 37% 20% 12%;
}

.thumimg.bs-on .bb-overlay.bs-san {
	padding: 20% 37% 20% 12%;
}

.thumimg.bs-on .bb-overlay.bs-yomi {
	padding: 20% 37% 20% 12%;
}

.thumimg.bs-on .bb-overlay.bs-right {
	padding: 20% 37% 20% 12%;
}

.thumimg.bs-on .bb-overlay.bs-left {
	padding: 20% 37% 20% 12%;
}
*/

#global-nav > ul > li {
	width: 19%;
}

#header-account {
	display: none;
}

.top-banner {
	margin: 0 auto;
	margin-top: 30px;
	text-align: center;
}

.top-banner img {
	border: solid 2px #606060;
}