@charset "utf-8";

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

}

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

}



.mw-1600 {max-width : 1600px;}
.mw-1200 {max-width : 1200px;}
.mw-900 {max-width : 900px;}
.mw-700 {max-width: 700px;}
.mw-600 {max-width: 600px;}
.mw-380 {max-width: 380px;}
.wm-250 {max-width: 250px;}

h1 {font-size: 1.8rem;}
h2 {font-size: 1.7rem;}
h3 {font-size: 1.5rem;}
h5 {font-size: 1.5rem; text-align: center;}

.f-s-50 {font-size: 5rem;}
.f-s-20 {font-size: 2rem;}
.f-s-15 {font-size: 1.5rem;}
.f-s-09 {font-size: 0.9rem;}

.height-50 {height : 50px;}

.bg-color-base {background: linear-gradient(125deg,#ffbf7f, #ffff7f);}
.bg-color-1 {background-color: #ffe5cc;}
.bg-color-2 {background-color: rgba(255, 255, 255, 0.5);}
.bg-color-3 {background-color: skyblue;}

@font-face {
	font-family: Poor Richard;
	src: url('font/POORICH.TTF') format("opentype");
}
.title {
	font-size: 2rem;
	font-family:'Poor Richard';
}

.tel-font {
	font-size : 50px;
	font-family: 'Gabriola','Athelas','HoeflerText-Regular','Hoefler Text',sans-serif;
	text-align : center;
	color : navy;
}



.wave {
	width: 100%;
	height: 100px;
	object-fit: cover;
}

/* 灰色通常ボタン */
.button-g {
	display: inline-block;
	font-size: 1.5rem;
	width: 200px;
	padding: 7px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: none;
	color: slategray;
	background-color: white;
	text-align: center;
	border-width: 2px;
	border-style: solid;
	border-color: slategray;
	border-radius: 5px;
	transition: .4s;
}
.button-g:hover {
	text-decoration: none;
	color: white;
	border-color: white;
	background-color: rgba(255, 102, 0, 0.7);
}

/* 白色通常ボタン */
.button-w {
	display: inline-block;
	font-size: 1.5rem;
	width: 200px;
	padding: 7px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-decoration: none;
	color: white;
	text-align: center;
	border-width: 3px;
	border-style: solid;
	border-color: white;
	border-radius: 5px;
	transition: .4s;
}
.button-w:hover {
	text-decoration: none;
	color: white;
	border-color: white;
	background-color: rgba(255, 102, 0, 0.7);
}

/* 丸ボタン */
.button-circle {
	text-align: center;
	margin: 0 auto;
	border-left-width: 2px;
	border-right-width: 2px;
	border-left-style: solid;
	border-right-style: solid;
	border-left-color: silver;
	border-right-color: silver;
	max-width: 130px;
}
	/* 波紋がふわっと広がる */
.button-circle-wave {
	position: relative;
	/* リンクの形状 */
	display:inline-block;
	text-decoration: none!important;;
	color: navy;
	font-size: 1.5rem;
}
	/* 波形の設定 */
.button-circle-wave:hover::before {
	content: '';
	/* 絶対配置で波形の位置を決める */
	position: absolute;
	left: 20px;
	top: -10px;
	/* 波形の形状 */
	border: 1px solid orangered;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	/* はじめは不透明 */
	opacity:1;
	/* アニメーションの設定 */
	animation: 1s circleanime-1 forwards;
}
	/* 波形が広がるアニメーション */
@keyframes circleanime-1 {
	0%{transform: scale(0);}
	50%{opacity: 1;}
	100%{transform:scale(2);opacity: 0;}
}




/* header */
.label-head {position: relative;}
.label-head::before {
    content: "kokoro club miyu";
	font-family:'Poor Richard';
	font-size: 2rem;
    position: absolute;
    right: 20px;
    top: 40px;
	z-index: 100;
}

/* top */
.label-top {
    position: relative;
}
.label-top::before {
	content: url(image/top-comment.png);
    position: absolute;
    left: 60%;
    top: 15%;
	z-index: 1000;
}

.label-top-s {
    position: relative;
}
.label-top-s::before {
	content: url(image/top-comment-s.png);
    position: absolute;
    right: 10%;
    top: 40%;
	z-index: 1000;
}

/* ユタBOX */
.yuta-box {
	background-image: url(image/bg-1.png);
	background-position : center center;
}

/* プロフィールBOX */
.profile-box {
	background-image: url(image/bg-2.png);
	background-repeat : no-repeat;
	background-position : right bottom;
}

/* 感染症心配なしBOX */
.worry-box {
	background: url(image/heart.png);
	background-position: center;
	background-repeat: no-repeat;
}

/* ユーザーコメントBOX */
.comment-box{
	font-size: 0.9rem;
	background-color: rgba(0, 64, 255, 0.2);
}
.comment-box-line {
	background-image: url("image/bg-c-2.png");
	background-repeat: repeat-y;
	background-size:contain;
}
.comment-box-padding {padding: 20px 70px 0px 70px;}
@media screen and (max-width: 480px) {
.comment-box-padding {padding: 30px 40px 0px 40px;}
}

	/* ユーザーコメント10の女性画像挿入 */
.label-10 {
	position: relative;
	}
.label-10::before {
	content: url(image/w-10-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント9の女性画像挿入 */
.label-9 {
	position: relative;
	}
.label-9::before {
	content: url(image/w-9-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント8の女性画像挿入 */
.label-8 {
	position: relative;
	}
.label-8::before {
	content: url(image/w-8-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント7の女性画像挿入 */
.label-7 {
	position: relative;
	}
.label-7::before {
	content: url(image/w-7-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント7の画像挿入 */
figure {
	float: left;
	margin: 0 10px 5px 0;
	width: 20%;
}
figure img {
	max-width: 100%;
}
	/* ユーザーコメント6の女性画像挿入 */
.label-6 {
	position: relative;
	}
.label-6::before {
	content: url(image/w-6-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
ol {margin-left: -20px;}
	/* ユーザーコメント5の女性画像挿入 */
.label-5 {
	position: relative;
	}
.label-5::before {
	content: url(image/w-5-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント4の女性画像挿入 */
.label-4 {
	position: relative;
	}
.label-4::before {
	content: url(image/w-4-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント3の女性画像挿入 */
.label-3 {
	position: relative;
	}
.label-3::before {
	content: url(image/w-3-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント2の女性画像挿入 */
.label-2 {
	position: relative;
	}
.label-2::before {
	content: url(image/w-2-a.png);
	position: absolute;
	left: 70px;
	top: -30px;
	z-index: 900;
}
	/* ユーザーコメント1の男性画像挿入 */
.label-1 {
	 position: relative;
}
.label-1::before {
	content: url(image/m-1-a.png);
    position: absolute;
    left: 70px;
    top: -30px;
	z-index: 900;
}

@media screen and (max-width: 575px) {
.label-10::before {
	content: url(image/w-10-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-9::before {
	content: url(image/w-9-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-8::before {
	content: url(image/w-8-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-7::before {
	content: url(image/w-7-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-6::before {
	content: url(image/w-6-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-5::before {
	content: url(image/w-5-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-4::before {
	content: url(image/w-4-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-3::before {
	content: url(image/w-3-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-2::before {
	content: url(image/w-2-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
.label-1::before {
	content: url(image/m-1-a.png);
    position: absolute;
    left: 30px;
    top: -50px;
	z-index: 900;
}
}

/* プライスBOX */
.price-box-line {
	border-width: 1px;
	border-style: solid;
	border-color: white;
	font-size: 1.5rem;
}
.price-font {
	font-size: 3rem;
	font-weight: bold;
	color: white;
	margin-top: -30px;
}

/* デジタル占い */
.tarot-box {
	margin: 0px auto -100px auto;
	position: relative;
	max-width : 200px;
}
.tarot-box-on {
	position: absolute;
	top: 0px;
}
.rotate-anime {
	animation: rotate-anime 20s linear infinite;
}
@keyframes rotate-anime {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}

/* ポップアップお問合せ */
.popup{
	display: none;
	background: rgba(243, 149, 24, 0.5);
	position: fixed;
	padding: 10px 0;
	bottom : 0px;
	width: 100%;
	z-index: 999;
}
.popup :hover{
	text-decoration: none;
	transform: scale( 1.1 );
	-webkit-transform: scale( 1.1 );
	-moz-transform: scale( 1.1 );
	transition: .4s;
}
.button-popup {
	width: 200px;
	background-color: white;
	border-width : 2px;
	border-style : solid;
	border-color : turquoise;
	border-radius: 5px;
	padding: 10px;
}


/* shuffle.html */
.random {
	background: url(image/bg-tarot.png);
	background-position: center center ;
	background-repeat: no-repeat;
	padding: 50px 0px;
}
	
/* カラムの様に並べる */
.column {
	width :  calc(100% / 8);
	padding : 5px;
	float:left;
}
@media screen and (max-width: 575px) {
.random {
	background: url(image/bg-tarot.png);
	background-position: center center ;
	background-repeat: no-repeat;
	padding: 0px 0px;
}
.column {
	width : calc(100% / 5);
	padding : 5px;
	float:left;
}
}

	/* タロットBOX */
.tarot-box-1 {
	background: url(image/bg-board-a.png);
	background-position: top center;
	height: 120px;
}
.tarot-box-2 {
	background: url(image/bg-board-b.png);
	background-position: top center;
}
.tarot-box-3 {
	background: url(image/bg-board-c.png);
	background-position: bottom center;
	height: 120px;
}
.image-rolling{transform:rotate(180deg);}



/* online.html */
.flow-box-in{
	background-image : url("image/smartphone.png");
	background-repeat : no-repeat;
	background-position : center center;
	padding: 30px 0px;
	text-align: center;
}

.step-box {
	padding: 30px;
	border-width: 1px;
	border-style: solid;
	border-color: navy;
	border-radius: 10px;
	margin-bottom: 50px;
  }