@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

.fod-box, .hulu-box , .paravi-box , .unext-box{
	background-color: #F6D4D8;  /* 背景色 */
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}

.fod-box::before , .hulu-box::before , .paravi-box::before , .unext-box::before{
	border: 1px solid #fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.fod-box::after , .hulu-box::after , .paravi-box::after , .unext-box::after{
	background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}
.fod-box::after {
	content: '【FODプレミアム】ここがおすすめ！';
}

.hulu-box::after {
	content: '【Hulu】ここがおすすめ！';
}

.paravi-box::after {
	content: '【Paravi】ここがおすすめ！';
}


.unext-box::after {
	content: '【U-NEXT】ここがおすすめ！';
}

.fod-dbox , .hulu-dbox, .paravi-dbox ,.unext-dbox{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #f3cbd0;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}
.fod-dbox::before , .hulu-dbox::before , .paravi-dbox::before , .unext-dbox::before{
	background-color: #ef858c;	/* 吹き出し背景色 */
	border-radius: 5px;
	color: #fff;	/* 吹き出し文字色 */
	padding: 5px 20px;
	position: absolute;
	left: -10px;
	top: -20px;
}
.fod-dbox::after , .hulu-dbox::after ,.paravi-dbox::after , .unext-dbox::after{
	border-top: 12px solid #ef858c;		/* 吹き出し三角部分の色 */
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: '';
	position: absolute;
	top: 10px;
	left: 15px;
}

.fod-dbox::before{
	content: 'FODプレミアムのデメリット';
}

.hulu-dbox::before{
	content: 'Huluのデメリット';
}

.paravi-dbox::before{
	content: 'Paraviのデメリット';
}

.unext-dbox::before{
	content: 'U-NEXTのデメリット';
}

.fod-box ul, .hulu-box ul, .paravi-box ul, .unext-box ul,.fod-dbox ul , .hulu-dbox ul, .paravi-dbox ul ,.unext-dbox ul{
	border: none;
}