
.page-container{
max-width:800px;
margin:0 auto}

.twitter__area {
max-width: 100%;
border: #DAD0C2 10px solid;
background: #fff;
box-sizing: border-box;
margin: 0 auto;
padding: 10px 20px;
font-size: 17px;
line-height: 1.3;
}

@media screen and (max-width:600px) {
 .twitter__area {
	padding: 15px;
}
}

.head__box {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}

.head__box .icon__box {
width: 80px;
height: 80px !important;
}

.head__box .icon__box img {
border-radius: 40px;
width: 100%;
object-fit: cover;
width: 80px;
height: 80px !important;
}

.head__box .name__box {
width: calc(100% - 100px);
margin-left: 20px;
padding-top: 10px;
}

@media screen and (max-width:600px) {
 .head__box .icon__box {
	width: 70px;
	height: 70px !important;
}

 .head__box .icon__box img {
	border-radius: 35px;
	width: 70px;
	height: 70px !important;
}

 .head__box .name__box {
	width: calc(100% - 85px);
	margin-left: 15px;
}
}

.head__box .name__box .name {
font-size: 1em;
}

.content__box {
width: 100%;
height: auto;
margin: 20px 0;
}

.content__box p {
font-size: 1em;
}

.content__box p .tag {
color: #2FBDFA;
}

.content__box .tweet__img {
width: 100%;
height: auto;
margin-top: 20px;
}

.content__box img {
width: 100%;
height: auto;
border-radius: 10px;
}

.action__box {
margin-top: 20px;
}

.action__box .icon__lists {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}

.action__box .icon__lists .icon__item {
display: flex;
align-items: center;
color: #888888;
}

.action__box .icon__lists .icon__item i {
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}

.action__box .icon__lists .icon__item i.comment {
background-image: url("https://production.static.squadbeyond.com/uploads/article_photo/photo/652480/2f21b946-1ba5-4084-b2f5-eab361af2e34.png");
}

.action__box .icon__lists .icon__item i.retweet {
background-image: url("https://production.static.squadbeyond.com/uploads/article_photo/photo/652482/d21f5855-bb15-4615-a667-cd3b8d704ebd.png");
}

.action__box .icon__lists .icon__item i.heart {
background-image: url("https://production.static.squadbeyond.com/uploads/article_photo/photo/652483/c2dab349-1650-4c67-9c84-16c8477c95b1.png");
}

.action__box .icon__lists .icon__item i.arrow-up {
background-image: url("https://production.static.squadbeyond.com/uploads/article_photo/photo/651855/bb1b0f7e-1d8a-4285-9284-09034dfbfe34.png");
}

.action__box .icon__lists .icon__item span {
font-size: 14px;
vertical-align: middle;
color: #888888;
}



/* ウィジェット全体 */
.l-review__appli__list {
/* 横幅 */
width: 100%;
/* 最大幅 */
max-width: 980px;
/* 文字色 */
color: #333;
/* 文字サイズ */
font-size: 12px;
/* 外側余白|上|auto=自動|下| */
margin: 0 auto 22px;
/* 行間 */
line-height: 1.8;
/* 枠線|太さ|タイプ|色| */
border: 2px solid #584f5b;
/* 角丸 */
border-radius: 4px;
}

.l-review__appli__list__ttl {
/* 文字サイズ */
font-size: 16px;
/* 背景色 */
background-color: #584f5b;
/* 文字色 */
color: #fff;
/* 内側余白|上|左右|下| */
padding: 0.2em 0.8em 0.2em 32px;
background: #584f5b url(https://d24894ewhzyuok.cloudfront.net/uploads/article_photo/photo/1164719/316c0e4b-af11-48af-b47f-37571a2ddef9.png) no-repeat 12px center / 15px 16px;
}



/* リスト全体 */
.l-review__appli__list__ul {
/* 内側余白 */
margin: 0;
/* 外側余白 */
padding: 0.4em 0.8em;
list-style-type: none;
}



/* リストそれぞれ */
.l-review__appli__list__ul__li {
/* 内側余白|上|左|下|右| */
margin: 0 0 5px 0;
/* 外側余白|上|左|下|右| */
}

.l-review__appli__list__ul__li:not(:last-of-type) {
/* 枠線下|太さ|タイプ|色| */
border-bottom: 1.5px solid #eee;
padding: 0 0 1.4em 0;
}



/*「総合評価」の★の設定*/
.l-review__appli__list__rate {
/*★の大きさ*/
font-size: 18px;
/*はみ出た要素を非表示にする*/
overflow: hidden;
/* 行間 */
line-height: 1.8;
/* 外側余白|上下左右| */
margin: 0;
position: relative;
display: inline-block;
}



/*総合評価に使用する記号等*/
.l-review__appli__list__rate:before,
.l-review__appli__list__rate:after {
content: "★★★★★";
}



/*星の色が薄い部分*/
.l-review__appli__list__rate:before {
/*文字色*/
color: #ccc;
}



/*星の色が黄色い部分*/
.l-review__appli__list__rate:after {
/*横位置（左基準）*/
left: 0;
/*縦位置（上基準）*/
top: 0;
/*文字色*/
color: #f5bc55;
/*はみ出た要素を非表示にする*/
overflow: hidden;
position: absolute;
}



/*色あり記号にする設定*/
.l-review__appli__list__rate.star1:after {
/*1文字分*/
width: 1em;
}

.l-review__appli__list__rate.star2:after {
width: 2em;
}

.l-review__appli__list__rate.star3:after {
width: 3em;
}

.l-review__appli__list__rate.star4:after {
width: 4em;
}

.l-review__appli__list__rate.star5:after {
width: 5em;
}



/* 強調文字 */
.marker {
/* 背景色 */
background-color: #ff9;
/* 太さ|bold=太い|normal=普通| */
font-weight: bold;
/* 文字色 */
color: #e60033;
}


.evaluation {
font-size: 16px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}

.evaluation ul {
margin: 0;
padding: 0;
list-style: none;
}

.evaluation-title {
text-align: center;
font-size: 1.5em;
font-weight: 600;
padding-top: 2em;
position: relative;
width: fit-content;
margin: auto;
}

.evaluation-title::before {
content: attr(data-title) "";
position: absolute;
font-size: 2.25em;
opacity: 0.15;
line-height: 1;
font-weight: 700;
left: -1.5em;
bottom: 0.25em;
}

.evaluation-content {
margin: 0 2em;
padding: 1em;
border: solid 3px;
border-radius: 10px;
}

.evaluation-content li {
line-height: 1.5;
position: relative;
padding-left: 2em;
}

.evaluation-content li:not(:first-child) {
margin-top: 0.75em;
}

.evaluation-content li:not(:last-child) {
border-bottom: dashed 2px;
padding-bottom: 0.75em;
}

.evaluation-content li::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
background: url(https://file.mysquadbeyond.com/uploads/article_photo/photo/3036937/9622ec1b-45b1-43bf-8f24-75fd93eab588.png) no-repeat 0 0/contain;
aspect-ratio: 1/1;
width: 1.5em;
display: block;
margin: 0;
}

.evaluation.good .evaluation-title {
color: #ff5e5e;
}

.evaluation.good .evaluation-content {
border-color: #ff5e5e;
}

.evaluation.good .evaluation-content li:not(:last-child) {
border-color: #ff5e5e;
}

.evaluation.more .evaluation-title {
color: #1d6faa;
}

.evaluation.more .evaluation-content {
border-color: #1d6faa;
}

.evaluation.more .evaluation-content li:not(:last-child) {
border-color: #1d6faa;
}

@media (max-width: 500px) {
 .evaluation {
	font-size: 3.3vw;
}

 .evaluation-title::before {
	left: -.5em;
}
}


ul.checkbox_list {
	list-style-type: none;
}
.buruburu {
		display: inline-block;
		animation: hurueru .1s  infinite;
}

@keyframes hurueru {
		0% {transform: translate(0px, 0px) rotateZ(0deg)}
		25% {transform: translate(2px, 2px) rotateZ(1deg)}
		50% {transform: translate(0px, 2px) rotateZ(0deg)}
		75% {transform: translate(2px, 0px) rotateZ(-1deg)}
		100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.hutoao {
	font-weight: bold;
	color: #0000ff;
}
.custom-blink.hidden {
	display: none;
}
.text--medium {
	font-size: 15px;
}
.text--big {
	font-size: 37.5px;
}
.kasen{
	background-image: linear-gradient(transparent 60%, #FFFF66 60%)
}
.post .h8 {
		font-size: 16px;
		font-weight: bold;
		line-height: 160%;
		color: rgb(68, 68, 68);
		margin: 0px 0px 8px;
		padding: 0px;
		border-bottom: 3px solid #F87000;
		display: block;
}
.box1{
		padding: 0.5em 1em;
		margin: 2em 0;
		font-weight: bold;
		boarder: solid 3px #000000;
}
.box2{
		padding: 0 0;
		margin: 0 0;
		font-weight: bold;
		boarder: solid 3px #000000;
}

.relatives {
	position: relative;
}
.absolutes {
	position: absolute;
	right: 0px;
	bottom: 150px;
}

.box--pink {
	margin: 2em 0;
	background: #fff;
	box-shadow: 0 0px 10px #ff99aa;
	border-radius: 5px;
}
.box--pink > .box-title {
	font-size: 1.2em;
	background: #ffc0cb;
	padding: 10px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
	border-radius: 5px 5px 0 0;
}
.box--pink p {
	margin: 0;
	padding: 15px 20px;
}

.box--pink .box-list--item {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
.text--small {
	font-size: 10px;
}
.text--right {
	text-align: right;
}

.cta-button {
	margin: 0 auto;
	padding: 0px 0;
	width: 100%;
	max-width: 480px;
	display: block;
	overflow: hidden;
	box-shadow: 10px 10px 10px rgb(0 0 0 / 30%);
	border-radius: 2vh;
}
.cta-button:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #fff;
	animation: shiny-brite 3s ease-in-out infinite;
}
.anime-button {
	animation: move-btn 3s linear infinite;
}
.anime-button > img {
	margin: 0 auto 0;
}
@keyframes move-btn {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.07);
	}
	65% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

/* ボタンの設定 */
.btn {
	/* 外側の余白 */
	margin: 0 auto;
	/* 内側の余白 */
	display: block;
	position: relative;
	/* アニメーションの速さ */
	transition: opacity 0.2s;
	/* 透明度 */
	opacity: 1;
	/*アニメーション。変化の対象、変化の始まりから終わりまでの時間、変化の仕方の順に指定*/
	transition: all 0.3s ease;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	text-decoration: none;
	border: none;
	box-sizing: border-box;
	outline: none;
	overflow: hidden;
}
/* ボタンホバー時 */
.btn:hover {
	/* 透明度 */
	opacity: 0.8;
}
 .btn:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	/*きらりと光るアニメーションのスタート位置*/
	left: 0;
	/*きらりと光るアニメーションの幅*/
	width: 30px;
	/*きらりと光るアニメーションの高さ*/
	height: 100%;
	/*きらりと光るアニメーションの色*/
	background-color: #fff;
	/*きらりと光るアニメーションの指定*/
	animation: shiny-brite 3s ease-in-out infinite;
}
/*ボタンを押した時に凹むアニメーション*/
.btn:active {
	box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
		-4px -4px 6px 0 rgba(116, 125, 136, .2),
		inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
		inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}
@-webkit-keyframes shiny-brite {
	/*光るアニメーションの流れに沿った中間ステップのキーフレーム指定*/
	0% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0;
	}
	80% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}
	81% {
		-webkit-transform: scale(4) rotate(45deg);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}
p.copyr {
	display: none;
}
/* footer */
main {
	padding-bottom: 0 !important;
}
.post {
	padding-bottom: 0;
}
@media only screen and (max-width: 959px) {
main {
	margin-bottom:  0px !important;
	}
}
footer {
	width:100%;
}
#footer {
	margin:0 auto;
}
#footer a {
	color: #4682b4;
	font-size: 12px;
	text-decoration: underline;
}
#footer a:hover {
	color: #4682b4;
}
#footer-in {
	margin:0 auto;
}

.btn_container {
background: #EA487D;
border-radius: 10px;
font-weight: bold;
text-align: center;
padding: 20px;
margin: 0 auto;
color: #fff;
width: 80%;
}
.btn_container a,
.btn_container a:visited {
color: #fff;
}
.note {
font-size: 9px;
line-height: 1rem;
text-align: right;
}
