@charset "utf-8";
/************************************************************
HTML reset
************************************************************/
html,body,div,header,footer,section,article,aside,menu,nav,hgroup,figure,dialog,audio,video,
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,pre,blockquote,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0;}
body{line-height:1;}
header,footer,section,article,aside,menu,nav,hgroup,figure,dialog,audio,video,details,summary{display:block;}
nav ul li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
i,em,strong,small,code,address,th{font-size:100%;font-weight:normal;font-style:normal;}
ul,ol{list-style:none;}
pre,code{font-family:inherit;}
q:before,q:after{content:"";}
abbr,acronym{border: 0;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:left;}
fieldset,img{border:0;}
input[type=submit],
input[type=reset],
input[type=button]{appearance:button;border-radius:0;box-sizing:border-box;cursor:pointer;-webkit-appearance:button;-webkit-box-sizing:content-box;}
/************************************************************
************************************************************/
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
font-family:"Century Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
word-break:break-all;
word-wrap:break-word;
overflow-wrap:break-word;
text-align:justify;
text-justify:inter-ideograph;
}
html{
overflow-y:scroll;
height:100%;
font-size:1rem;
}
body{
margin:0 auto;
padding:0;
height:100%;
line-height:1.8;
background:#F9F9F9;
color:#000;
}
/***********************************************************/
h1, h2, h3, h4, h5, h6{
font-weight:bold;
line-height:1.3;
margin:3rem 0 0 0;
}
h1{
font-size:1.8rem;
margin-top:1.5rem;
padding:0 0 1.5rem 0;
background-image:repeating-linear-gradient(to right,
 #c4e17f 0px, #c4e17f 50px,
 #f7fdca 50px, #f7fdca 100px,
 #fad071 100px, #fad071 150px,
 #f0766b 150px, #f0766b 200px,
 #db9dbe 200px, #db9dbe 250px,
 #c49cdf 250px, #c49cdf 300px,
 #6599e2 300px, #6599e2 350px,
 #61c2e4 350px, #61c2e4 400px);
background-size:100% 1rem;
background-repeat:no-repeat;
background-position:bottom;
}
h2{
font-size:1.5rem;
padding:1rem;
background:#eee;
border-top:15px #fff double;
border-bottom:15px #fff double;
}
#body h2{
text-align:center;
}
h2.balloon{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction: column;
	font-size:1rem;
	letter-spacing:5px;
	margin:2rem 0 0 0;
	padding:0 0 0 5px;
	height:60px;
	border:0;
	background:#666;
	color:#fff;
	position:relative;
}
h2.balloon:after{
	content:'';
	position:absolute;
	bottom:-15px;
	left:50%;
	transform:translate(-20px, -50%);
	-webkit-transform: translate(-20px, -50%);
	-ms-transform: translate(-20px, -50%);
	margin:0;
	width:0;
	height:0;
	border-top:10px solid #666;
	border-right:20px solid transparent;
	border-left:20px solid transparent;
}
h3{
font-size:1.3rem;
padding:1rem 0;
border-top:5px #ccc solid;
border-bottom:5px #ccc solid;
}
h4{
font-size:1.2rem;
padding:.75rem 0;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
}
h5{
font-size:1.1rem;
padding:.75rem 0 .75rem 1rem;
border-left:5px #ccc solid;
}
h6{
font-size:1.1rem;
padding:0;
}
h6:before{
content:"✶";
margin-right:.5rem;
}

/***********************************************************/
img{
outline:none;
border:none;
vertical-align:middle;
max-width:100%;
height:auto;
}
main h1 + img{
width:100%;
}
/***********************************************************/
a{
text-decoration:underline;
color:#0066ff;
-webkit-transition:all 0.1s ease-out;
   -moz-transition:all 0.1s ease-out;
    -ms-transition:all 0.1s ease-out;
     -o-transition:all 0.1s ease-out;
        transition:all 0.1s ease-out;
}
/*a:active,*/
a:hover{
text-decoration:none;
}
/***********************************************************/
p{
margin:1.5rem 0 0 0;
}
strong{
font-weight:bold;
}
em{
font-weight:bold;
background:linear-gradient(transparent 50%, rgba(255,255,0,0.8) 100%);
}
/***********************************************************/
ul,
ol{
margin:1rem 0 0 2rem;
}
ul li,
ol li{
line-height:1.5;
margin:.5em 0 0 0;
}
ul li{
list-style:disc;
}
ol li{
list-style:decimal;
}
/**********************/
li ul,
li ol{
/*font-size:.9em;*/
margin:.5rem 0 0 1rem;
}
li ul li,
li ol li{
list-style:circle;
margin:.5em 0 0 0;
}
/***********************************************************/
dl{
margin:2rem 0 0 0;
}
dt{
margin:1.5rem 0 0 0;
font-weight:bold;
line-height:1.2;
}
dd{
font-size:.95rem;
margin:.5rem 0 0 .5rem;
padding:.5rem 0 .5rem 1rem;
border-left:1px #666 dotted;
}
dd p{
margin:1rem 0 0 0;
}
/***********************************************************/
blockquote{
font-size:.9rem;
margin:1.5rem 0 0 0;
padding:0 1rem 1rem 1rem;
position:relative;
border:1px #ccc dashed;
}
blockquote:before{
position:absolute;
top:-1rem;
left:1rem;
content:"\f10d";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:3.5rem;
margin:0;
padding:0;
line-height:1.0;
color:rgba(0,0,0,.05);
}
/*
blockquote:after{
position:absolute;
bottom:-1rem;
right:1rem;
content:"\f10e";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:5rem;
margin:0;
padding:0;
line-height:1.0;
color:rgba(0,0,0,.1);
}
*/

blockquote p{
position:relative;
margin:1rem 0 0 0;
z-index:9999;
}

cite{
display:block;
text-align:right;
font-size:.75rem;
font-style:normal;
margin:.5rem 0 0 0;
line-height:1.3;
}
cite a{
font-weight:normal;
}

/***********************************************************/
pre{
overflow-x:scroll;
line-height:1.2;
font-family:"Courier New", Consolas, monospace;
font-size:.9rem;
margin:1.5rem 0 0 0;
padding:1rem;
background:#666;
color:#fff;
}
code{
color:#000080;
}

.pre{
overflow-x:scroll;
}

/***********************************************************/
table{
margin:1.5rem 0 0 0;
width:100%;
font-size:.9rem;
line-height:1.4;
}
table th,
table td{
vertical-align:top;
padding:.5rem;
border:1px #ccc solid;
}
table th{
white-space:nowrap;
text-align:center;
font-weight:bold;
background:#eee;
}
table td{
}
table p{
margin:1rem 0 0 0;
}
table ul,
table ol,
table li{
margin:1rem 0 0 1rem;
}

table.center th,
table.center td{
text-align:center;
}
/***********************************************************/
form legend{
display:none;
}
form dl dd{
margin:.5rem 0 0 0;
}
form dl dd input, form dl dd textarea{
padding:.5rem;
}
form dl dd select{
padding:.5rem;
}
form ul{
margin:1rem 0;
}
form ul li{
list-style:none;
}
form p{
/*margin:10rem 0 0 0;*/
}
form p input{
padding:.5rem 1rem;
}

input[type=email],
input[type=url],
textarea{
width:100%;
}

input[type=submit],
button{
cursor:pointer;
line-height:50px;
margin-right:.5rem;
padding:0 1rem;
border:0;
background:#999;
color:#fff;
}
input[type=submit]:hover,
button:hover{
background:#666;
}
input[type=submit]:active,
button:active{
box-shadow:0px 0px 1rem 1rem #000 inset;
}

/***********************************************************/
hr{
margin:1.5rem 0 0 0;
padding:0;
height:1px;
border:0;
border-top:1px #ccc solid;
}
hr.dot{
border-top:1px #ccc dashed;
}

/************************************************************
装飾
************************************************************/
#action{
overflow:hidden;
}
#action form{
float:left;
margin-right:3px;
}
.complete{
color:#00AA00;
font-weight:bold;
}
.attention{
color:#FF0000;
font-weight:bold;
}
.number{
text-align:right;
}

/**/
.clear{
clear:both;
}

/************************************************************
Point
************************************************************/
.point{
font-size:.95rem;
display:block;
margin:1.5rem 0 0 0;
padding:1rem;
position:relative;
background:rgba(205,0,0,.2);
}
.point:before{
float:right;
content:"\f0a6";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:2rem;
text-align:center;
margin:-2rem -.5rem 0 0;
padding:.7rem .5rem .3rem .5rem;
width:2.5rem;
height:2.5rem;
line-height:1.0;
color:rgba(205,0,0,.2);
background:#fff;
border:3px rgba(205,0,0,.2) solid;
border-radius:50%;
}
.point p{
position:relative;
margin-top:.5rem;
z-index:9999;
}

/************************************************************
Point2
************************************************************/
.point2{
font-size:.95rem;
display:block;
margin:1.5rem 0 0 0;
padding:1rem;
position:relative;
background:rgba(0,0,255,.2);
}
.point2:before{
float:right;
content:"\f7f5";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:2rem;
text-align:center;
margin:-2rem -.5rem 0 0;
padding:.7rem .5rem .3rem .5rem;
width:2.5rem;
height:2.5rem;
line-height:1.0;
color:rgba(0,0,255,.2);
background:#fff;
border:3px rgba(0,0,255,.2)solid;
border-radius:50%;
}
.point2 p{
position:relative;
margin-top:.5rem;
z-index:9999;
}

/************************************************************
記事概要・ポイント
************************************************************/
ul.sammary{
font-size:.9em;
line-height:1.3;
margin:1.5rem 0 0 0;
padding:1rem;
border:1px #ccc solid;
}
ul.sammary:before{
content:"記事概要・ポイント";
font-weight:bold;
display:block;
margin:-1rem -1rem 1rem -1rem;
padding:.5rem 1rem;
background:#eee;
color:#33CCDD;
}
ul.sammary li{
margin:.5rem 0 0 1rem;
}

/************************************************************
YouTube,videoレスポンシブ
************************************************************/
/*16:9*/
p:has(iframe),
p:has(video){
position:relative;
height:0;
padding:0 0 56.25%;
overflow:hidden;
}
p iframe,
p video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/*正方形*/
p:has(iframe.square),
p:has(video.square){
padding:0 0 100%;
}


/************************************************************
インラインレイアウト
************************************************************/
.right{
float:right;
margin:0 0 0 1rem;
width:calc(100% / 4);
}
.left{
float:left;
margin:0 1rem 0 0;
width:calc(100% / 4);
}

/************************************************************
もっと見る
************************************************************/
a.more{
flex:1;
display:block;
overflow:hidden;
font-size:1.2rem;
font-weight:bold;
text-align:center;
text-decoration:none;
margin:.5rem auto 0 auto;
padding:1rem 0;
width:100%;
line-height:1;
color:#fff;
background:#ff9900;
border:5px #ffcc00 solid;
border-radius:1rem;
position:relative;
transition:0.2s;
}
a.more i{
display:block;
text-align:center;
font-size:1.5em;
}
a.more img{
display:block;
text-align:center;
height:1.5em;
}
a.more:hover{
border:5px #ff9900 solid;
}
a.more:before{
content:'';
position:absolute;
top:-100px;
left:-100px;
width:100px;
height:100px;
background-image:linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
/* アニメーション */
animation-name:shiny;
animation-duration:3s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
}
@keyframes shiny{
 0% {
  transform:scale(0) rotate(25deg);
  opacity:0;
 }
 50% {
  transform:scale(1) rotate(25deg);
  opacity:1;
 }
 100% {
  transform:scale(50) rotate(25deg);
  opacity:0;
 }
}

/*********************************************
クリック開閉（目次）
*********************************************/
details.toclist{
margin:1.5rem 0 0 0;
padding:0;
border-top:3px #ccc solid;
border-bottom:2px #ccc solid;
background:#f9f9f9;
}
details.toclist summary{
cursor:pointer;
font-size:13px;
font-weight:bold;
display:flex;
align-items:center;
overflow:hidden;
list-style:none;
cursor:pointer;
outline:none;
margin:0;
padding:0 0 0 1.5em;
width:100%;
line-height:50px;
border-bottom:1px #ccc solid;
}
details.toclist summary::-webkit-details-marker{
display:none;
}
details.toclist summary:after{
content:"＋";
display:block;
overflow:hidden;
text-align:center;
font-size:1.3em;
font-weight:bold;
width:50px;
height:50px;
line-height:50px;
white-space:nowrap;
margin:0 0 0 auto;
padding:0;
background:#ccc;
}
details.toclist[open] summary:after{
content:"×";
}
details.toclist ul{
margin:1.5em 0 0 0;
padding:0 1em 1.5em 1em;
border-bottom:1px #ccc solid;
}
details.toclist li{
font-size:14px;
line-height:1.5em;
color:#ccc;
transition:0.3s;
}
details.toclist .h2{
list-style:none;
font-weight:bold;
margin:1.5em 0 0 -1em;
padding:.5em 0 .5em 1em;
border-left:3px #ccc solid;
}
details.toclist .h3{margin-left:1.5em}
details.toclist .h4{margin-left:2.5em}
details.toclist .h5{margin-left:3.5em}
details.toclist .h6{margin-left:4.5em}
details.toclist a{
display:block;
overflow:hidden;
text-decoration:none;
color:#333;
}
details.toclist .h2:has(a:hover){
border-left:3px #333 solid;
}
details.toclist .h3:has(a:hover),
details.toclist .h4:has(a:hover),
details.toclist .h5:has(a:hover),
details.toclist .h6:has(a:hover){
color:#333;
}

/*********************************************
クリック開閉（FAQ、レビュー）
*********************************************/
details.faq{
display:block;
overflow:hidden;
padding:0;
}
details.faq summary{
display:flex;
align-items:center;
overflow:hidden;
list-style:none;
cursor:pointer;
outline:none;
margin:1rem 0 0 0;
padding:0;
line-height:1.2;
border-top:1px #eee solid;
border-bottom:1px #eee solid;
}
details.faq summary::-webkit-details-marker{
display:none;
}
details.faq summary strong{
font-weight:normal;
flex:1;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
details.faq summary u{
display:block;
font-weight:bold;
flex:1;
text-decoration:none;
}
details.faq summary:before{
content:"＋";
display:block;
overflow:hidden;
text-align:center;
font-weight:bold;
width:60px;
height:60px;
line-height:60px;
white-space:nowrap;
margin:0 .5rem 0 0;
padding:0;
color:#333;
background:#eee;
}
details.faq summary:hover{
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
}
details.faq summary:hover:before{
color:#333;
background:#ccc;
}
details.faq[open] summary{
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
}
details.faq[open] summary:before{
content:"－";
color:#333;
background:#ccc;
}

details.faq article{
display:block;
overflow:hidden;
margin:0 0 1rem 0;
}

/************************************************************
ページトップ
************************************************************/
ul#tolink{
	z-index:9999;
	position:fixed;
	right:10px;
	bottom:10px;
	margin:0;
	padding:0;
}
ul#tolink li{
	list-style:none;
	margin:0;
	padding:0;
}
ul#tolink li a{
	display:block;
	position:relative;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	color:#fff;
	background:rgba(0,153,204,0.5);
	border-radius:50%;
}
ul#tolink li a:hover{
	font-size:1.5rem;
	width:60px;
	height:60px;
	line-height:60px;
	margin:0 -10px -10px 0;
	background:rgba(0,153,204,0.7);
	border-radius:0;
}

/************************************************************
広告
************************************************************/
.ad{
display:block;
overflow:hidden;
width:100%;
line-height:1.0;
text-align:center;
margin:1.5rem auto 0 auto;
padding:0;
}
.ad strong, 
.ad span{
display:block;
text-align:center;
margin:.5rem 0 0 0;
line-height:1.3;
}

/************************************************************
広告：PR
************************************************************/
.pr{
display:block;
overflow:hidden;
font-size:.9rem;
text-align:center;
margin:0;
padding:0;
line-height:1.3;
}
.pr:before{
content:"- PR -";
font-size:11px;
display:block;
text-align:center;
line-height:1;
margin:2rem 0 1rem 0;
}
.pr a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size:1.1rem;
line-height:1;
margin:1rem -2.5px 0 -2.5px;
padding:1.5rem 0;
color:#fff;
background:#00cc66;
border:10px #fff double;
border-radius:3rem;
position:relative;
}
.pr a:hover{
background:#339966;
}
.pr a:before{
content:'';
position:absolute;
top:-100px;
left:-100px;
width:100px;
height:100px;
background-image:linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
/* アニメーション */
animation-name:shiny;
animation-duration:3s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
}
@keyframes shiny{
 0% {
  transform:scale(0) rotate(25deg);
  opacity:0;
 }
 50% {
  transform:scale(1) rotate(25deg);
  opacity:1;
 }
 100% {
  transform:scale(50) rotate(25deg);
  opacity:0;
 }
}

/************************************************************
広告３選
************************************************************/
table.comparison{
table-layout:fixed;
margin:1.5rem 0 0 0;
}
table.comparison th,
table.comparison td{
font-size:.8rem;
margin:0;
padding:.5rem;
border:1px #ccc solid;
}
table.comparison th{
background:#666;
color:#fff;
}
table.comparison th img{
display:block;
margin:0 auto;
width:50px;
}
table.comparison td img{
width:100%;
}
table.comparison strong{
display:block;
font-size:.9rem;
text-align:center;
margin:0 auto .5rem auto;
padding-bottom:.5rem;
border-bottom:1px #ccc dotted;
}
table.comparison p{
margin:.5rem 0 0 0;
line-height:1rem;
}
table.comparison ul{
margin:.5rem 0 0 1rem;
padding:0;
}
table.comparison li{
margin:0;
padding:0;
}
table.comparison a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-weight:bold;
white-space:nowrap;
padding:.5rem 0;
color:#fff;
background:#0066ff;
}
table.comparison a:hover{
background:#336699;
}
table.comparison a:before{
content:"- PR -";
display:block;
font-weight:normal;
font-size:11px;
}

table.comparison details{
margin:.5rem 0 0 0;
}
table.comparison details:hover{
cursor:help;
}
table.comparison summary{
display: list-itrem;
}

/************************************************************
広告：公式サイト
************************************************************/
.official{
display:block;
overflow:hidden;
text-align:center;
}
.official:before{
display:block;
white-space:pre-wrap;
content:"- PR -";
font-size:11px;
line-height:1.2;
}

.pr-flex{
display:flex;
justify-content:space-between;
gap:5px;
width:100%;
margin:0;
padding:0;
border:0;
}
.pr-flex a{
width:100%;
}

/************************************************************
APP 占いフォーム
************************************************************/
.numeroWrap{
display:flex;
gap:1rem;
margin:0;
padding:0 1rem 1rem 1rem;
border:3px #ccc solid;
}
form.numeroForm *,
form.numeroNumber *{
font-size:1rem;
line-height:1;
margin:0;
padding:0;
border:0;
outline:0;
}
form.numeroForm,
form.numeroNumber{
display:flex;
flex-direction:column;
width:50%;
}
form.numeroForm p,
form.numeroNumber p{
margin-top:auto;;
}
form.numeroForm p button,
form.numeroNumber p button{
margin-top:1.5rem;;
}
form.numeroForm dt,
form.numeroNumber dt{
display:flex;
align-items:center;
white-space:nowrap;
padding:1rem 0 0 0;
}
form.numeroForm dd,
form.numeroNumber dd{
display:flex;
align-items:center;
padding:.5rem 0 0 0;
gap:5px;
}
form.numeroForm input,
form.numeroNumber input,
form.numeroForm button,
form.numeroNumber button{
margin:0;
padding:0 .5rem;
width:100%;
height:3rem;
border:3px #ccc solid;
}
form.numeroForm input,
form.numeroNumber input{
background:none;
}
form.numeroForm dt input,
form.numeroNumber dt input{
font-weight:bold;
height:auto;
margin:0;
padding:0;
border:0;
background:none;
color:#ff0000;
}
form.numeroForm input::placeholder,
form.numeroNumber input::placeholder{
color:#000;
}
form.numeroForm input#Y{
width:50%;
}
form.numeroForm input#M,
form.numeroForm input#D{
width:25%;
}
form.numeroForm input#Y:hover,
form.numeroForm input#M:hover,
form.numeroForm input#D:hover,
form.numeroForm input#input_name:hover{
border:3px #777 solid;
}
form.numeroForm input#Y:focus,
form.numeroForm input#M:focus,
form.numeroForm input#D:focus,
form.numeroForm input#input_name:focus{
border:3px #777 solid;
background:#fff;
}
form.numeroForm button,
form.numeroNumber button{
text-align:center;
font-weight:bold;
}
form.numeroNumber ul,
form.numeroNumber ol{
margin:0;
padding:.5rem 0 0 0;
width:100%;
border-top:1px #ccc solid;
}
form.numeroNumber ul{
display:list-item;
overflow:visible;
}
form.numeroNumber ul li{
list-style:circle;
font-size:.9rem;
margin:.1rem 0 0 1.5rem;
}
form.numeroNumber ol li{
list-style:decimal;
font-size:.9rem;
margin:.5rem 0 0 1.5rem;
}
/********************************/
@media all and (max-width:500px){
	.numeroWrap{
		display:block;
	}
	form.numeroForm,
	form.numeroNumber{
		width:100%;
	}
}
/*********************************************************************
END
*********************************************************************/