@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: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
letter-spacing:.1em;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
*/
font-family: 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{
margin:0 auto;
padding:0;
font-size:1rem;
height:100%;
line-height:1.8;
background:#F9F9F9;
color:#222;
}
/***********************************************************/
h1, h2, h3, h4, h5, h6{
font-weight:bold;
line-height:1.4;
margin:3rem 0 0 0;
}
main h1:first-of-type{
margin-top:1.5rem;
}
aside h2:first-of-type{
margin-top:1.5rem;
}

h1{
font-size:1.5rem;
width:100%;
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;
text-align:center;
padding:1rem;
background:#eee;
border-top:15px #fff double;
border-bottom:15px #fff double;
background:rgba(0,0,0,.5);
color:#fff;
}
h3{
font-size:1.4rem;
padding:1rem 0;
border-top:5px #ccc solid;
border-bottom:5px #ccc solid;
}
h4{
font-size:1.3rem;
padding:1rem 0;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
}
h5{
font-size:1.2rem;
padding:.75rem 0;
border-top:1px #ccc dashed;
border-bottom:1px #ccc dashed;
}
h6{
font-size:1.1rem;
padding:.5rem 0;
border-top:1px #ccc dotted;
border-bottom:1px #ccc dotted;
}

/***********************************************************/
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%);
}
/***********************************************************/
dl{
margin:1.5rem 0 0 0;
}
dt{
margin:1rem 0 0 0;
font-weight:bold;
}
dd{
font-size:.95rem;
margin:.5rem 0 0 .5rem;
padding:0 0 0 1rem;
border-left:1px #666 dashed;
}
dd *{
margin-top:.5rem;
}
/***********************************************************/
ul, ol{
font-size:.95rem;
line-height:1.6;
margin:1.5rem 0 0 1.5rem;
}
dd ul,
dd ol{
font-size:.9rem;
margin-top:0;
}
/**********************/
ul li{
list-style:disc;
margin:.5rem 0 0 0;
}
ol li{
list-style:decimal;
margin:.5rem 0 0 0;
}
/**********************/
li ul,
li ol{
margin:0 0 0 1rem;
}
li ul li,
li ol li{
font-size:.9rem;
line-height:1.4;
list-style:circle;
}
/**********************/
.check-list li{
list-style-type:"✅ ";
}
.check-list li ul li{
list-style-type:disc;
}
/**********************
記事概要・ポイント
**********************/
ul.sammary{
margin-left: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;
}

/***********************************************************/
blockquote{
display:block;
font-size:.95rem;
margin:1.5rem 0 0 0;
padding:1rem 1.5rem 1.5rem 1.5rem;
position:relative;
border:1px #666 dashed;
}
blockquote:before{
position:absolute;
top:-.5rem;
left:.5rem;
font-size:5rem;
line-height:1;
content:"\f10d";
font-family:FontAwesome;
color:rgba(0,0,0,.05);
}
blockquote:after{
position:absolute;
bottom:-.5rem;
right:.5rem;
font-size:5rem;
line-height:1;
content:"\f10e";
font-family:FontAwesome;
color:rgba(0,0,0,.05);
}

blockquote *{
position:relative;
margin:.5rem 0 0 0;
z-index:9999;
}
cite{
display:block;
overflow:hidden;
text-align:right;
font-size:.75rem;
text-overflow:ellipsis;
white-space:nowrap; 
}
cite a{
font-weight:normal;
}
/***********************************************************/
pre{
font-family:monospace;
font-size:.9rem;
white-space:pre-wrap;
margin:1.5rem 0 0 0;
padding:1rem;
line-height:1.6;
background:rgba(0,0,0,.5);
color:#fff;
}
code{
margin:0;
padding:0;
}

.pre{
overflow-x:scroll;
-webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
}
/***********************************************************/
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{
text-align:center;
white-space:nowrap;
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,
.point2{
display:block;
font-size:.95rem;
margin:1.5rem 0 0 0;
padding:.5rem 1rem 1.5rem 1rem;
}
.point *,
.point2 *{
line-height:1.6;
margin:1rem 0 0 0;
padding-top:0;
border-top:0;
}
.point li,
.point2 li,
table li{
line-height:1;
margin:.5rem 0 0 1rem;
}
.point{
background:rgba(255,153,204,.2);
border-left:5px rgba(255,153,204,.3) solid;
border-right:5px rgba(255,153,204,.3) solid;
}
.point2{
background:rgba(0,0,0,.05);
border-left:5px rgba(0,0,0,.1) solid;
border-right:5px rgba(0,0,0,.1) solid;
}


/************************************************************
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:1.5rem 0;
width:90%;
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;
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;
}

/************************************************************
会話：吹き出し
************************************************************/
.voice,
.voiceAI,
.voiceUSER{
display:block;
font-size:.95rem;
margin:1.5rem 0 0 0;
padding:.5rem 1rem 1.5rem 1rem;
border-style:solid;
border-width:5px;
border-radius:calc(1rem + 5px) 0 0 0;
border-radius:calc(1rem + 5px);
background:rgba(0,0,0,.01);
}
.voice *,
.voiceAI *,
.voiceUSER *{
line-height:1.6;
margin:1rem 0 0 0;
padding-top:0;
border-top:0;
}
.voice li,
.voiceAI li,
.voiceUSER li{
line-height:1.2;
margin:.5rem 0 0 1rem;
}
.voice{
border-color:#3FB9A7;
}
.voiceAI{
border-color:#CC6699;
}
.voiceUSER{
border-color:#FFC800;
}
.voice:before,
.voiceAI:before,
.voiceUSER:before{
float:right;
content:"";
background-size:cover;
background-repeat:no-repeat;
width:4rem;
height:4rem;
margin:-1.5rem calc(-1rem - 10px) 0 1rem;
line-height:1;
border-radius:50% 50% 50% 0;
border-style:solid;
border-width:5px;
}
.voice:before{
background-image:url('../images/avatar.webp');
border-color:#3FB9A7;
}
.voiceAI:before{
background-image:url('../images/voiceAI.svg');
border-color:#CC6699;
}
.voiceUSER:before{
background-image:url('../images/voiceUSER.svg');
border-color:#FFC800;
}

/************************************************************
広告
************************************************************/
.ad{
display:block;
overflow:hidden;
width:100%;
line-height:1;
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.2;
}

/************************************************************
広告：PR
************************************************************/
.pr{
display:block;
overflow:hidden;
font-size:.9rem;
text-align:center;
margin:0;
padding:0;
line-height:1.2;
}
.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;
 }
}

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