@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;}
em,strong,small,code,address,th{font-size:100%;font-weight:normal;font-style:normal;}
ul,ol{list-style:none;}
i,pre,code{font-family:inherit;font-style:normal;}
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%;
}
body{
font-size:.95rem;
margin:0 auto;
padding:0;
height:100%;
line-height:1.7;
background:#F9F9F9;
color:#222;
}
/***********************************************************/
h1, h2, h3, h4, h5, h6{
font-weight:bold;
line-height:1.3;
margin:3rem 0 0 0;
padding:1rem 0;
}
h1{
font-size:1.7rem;
margin-top:2rem;
padding:0 0 2rem 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;
max-width:100%;
}
#body .wrap > h1{
position:relative;
}
#body .wrap > h1:after{
content:"当サイトは広告を掲載しています。";
white-space:nowrap;
font-size:11px;
font-weight:normal;
line-height:1;
position:absolute;
right:0;
bottom:3px;
}

h2{
font-size:1.3em;
text-align:center;
padding:1rem;
border-top:1rem #fff double;
border-bottom:1rem #fff double;
background:rgba(0,0,0,.5);
color:#fff;
}
h2.balloon{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.9rem;
	margin:1.5rem 0 0 0;
	padding:0;
	line-height:60px;
	border:0;
	background:#666;
	color:#eee;
	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.3em;
border-top:.3rem #ccc solid;
border-bottom:.1rem #ccc solid;
}
h4{
font-size:1.2em;
border-top:.1rem #ccc solid;
border-bottom:.1rem #ccc solid;
}
h5{
font-size:1.1em;
border-top:.1rem #eee solid;
border-bottom:.1rem #eee solid;
}
h6{
font-size:1.1em;
padding:0 0 .5rem 0;
border-bottom:.1rem #eee solid;
}
/***********************************************************/
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:2rem 0 0 0;
}
strong{
font-weight:bold;
}
em{
font-weight:bold;
background:linear-gradient(transparent 50%, rgba(255,255,0,0.8) 100%);
}
/***********************************************************/
ul{
font-size:.95rem;
margin:1.5rem 0 0 2rem;
list-style:disc;
}
ul li{
margin:.5rem 0 0 0;
}
/**********************/
ol{
font-size:.95rem;
margin:1.5rem 0 0 2rem;
list-style:decimal;
}
ol li{
margin:1rem 0 0 0;
list-style:decimal;
}
/**********************/
li ul,
li ol{
margin:0 0 0 1rem;
font-size:.9rem;
}
li ul li,
li ol li{
margin:0;
list-style:circle;
}
/***********************************************************/
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;
}
dd ul,
dd ol{
margin:0 0 0 1rem;
}
dd ul li{
margin:0;
padding: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 p{
position:relative;
margin:1rem 0 0 0;
z-index:9999;
}
cite{
display:block;
text-align:right;
font-size:.75rem;
}
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:2rem 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{
display:block;
font-size:.9rem;
margin:1.5rem 0 0 0;
padding:1rem;
line-height:1.5;
position:relative;
background:#FFCCCC;
}
.point:before{
float:right;
content:"\f6d5";
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:#FFCCCC;
background:#fff;
border:3px #FFCCCC solid;
border-radius:50%;
}
.point 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);
}

/*********************************************
クリック開閉（目次）
*********************************************/
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;
}

/************************************************************
ページトップ
************************************************************/
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;
}

/************************************************************
【PR】広告
************************************************************/
.ad{
display:block;
overflow:hidden;
width:100%;
line-height:1.0;
text-align:center;
margin:2rem auto 0 auto;
padding:0;
}

/************************************************************
【PR】公式リンク
************************************************************/
section.pr{
display:block;
overflow:hidden;
font-size:.9rem;
font-weight:bold;
text-align:center;
line-height:1.2;
margin:0;
padding:0;
}
section.pr:before{
content:"- PR -";
font-size:11px;
font-weight:normal;
display:block;
margin:1rem 0 .5rem 0;
}
section.pr dl,
section.pr dt,
section.pr dd{
text-align:center;
margin:0;
padding:0;
border:0;
}
section.pr dd{
display:flex;
gap:0 .5rem;
margin:1rem 0 0 0;
}
section.pr a{
display:block;
overflow:hidden;
font-size:1.2rem;
text-align:center;
text-decoration:none;
width:100%;
line-height:4rem;
border-radius:4rem;
border:1px rgba(51,204,51,1) solid;
background:linear-gradient(to bottom, rgba(51,204,51,.3), rgba(51,204,51,1) 50%, rgba(51,204,51,1) 50%, rgba(51,204,51,.3));
color:#fff;
position:relative;
}
section.pr a:hover{
background:linear-gradient(to bottom, rgba(51,204,51,1), rgba(51,204,51,.3) 50%, rgba(51,204,51,.3) 50%, rgba(51,204,51,1));
color:#666;
}
section.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;
 }
}

/************************************************************
モーダルウィンドウ（サイト案内に使用）
************************************************************/
#modal{
display:none;
overflow:auto;
position:fixed;
z-index:2;
left:0;
top:0;
width:100vw;
height:100%;
background-color:rgba(0,0,0,.5);
}
#modal .modal-content{
margin:1rem auto;
padding:1rem;
width:90%;
max-width:1024px;
height:calc(100% - 2rem);
background:#f9f9f9;
position:relative;
}
#modal .modal-content iframe{
width:100%;
height:100%;
border:0;
}
#modal.is-hidden{
display:none;
}
#modal.is-shown{
display:block;
}
#modal .close{
position:absolute;
top:1rem;
right:3rem;
font-size:2rem;
font-weight:bold;
text-align:center;
width:3rem;
line-height:3rem;
border-radius:50%;
background:#33CCCC;
color:#fff;
}
#modal .close:hover,
.close:focus{
cursor:pointer;
background:#666;
}

/*********************************************************************
END
*********************************************************************/