@charset "utf-8";
/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');

h1,h2,h3,h4,h5,h6{
    font-size: unset;
    padding:0;
    margin:0;
}
ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
p{ margin: 0; font-size: clamp(0.7rem, 1.2vw, 1.2rem);}

/*
    font-size: clamp(0.9rem, 1.8vw, 1.6rem);
*/
a{color:#0066c0;}
a:hover{ text-decoration: none; color:#333; font-weight: bold;}
a:visited{text-decoration: none; color:#0066c0;}

html {
    font-family: /*'Zen Maru Gothic', sans-serif;*/'メイリオ','Meiryo','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','ＭＳ Ｐゴシック',sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    padding: 0;
    color:#444;
    background-color:#eee;/*fbd580*/
}
main {
    max-width: 980px;
    width:100%;
    margin:1rem auto;
    background-color:#FFF;
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: clamp(1rem, 1.4vw, 1.6rem);
    line-height: 1.8rem;
}
@media ( max-width : 600px ) {
main {
	width:93%;
    margin:0.4rem auto;
	padding: 0.2rem;
    letter-spacing: -0.02rem;
    line-height: 1.3rem;

}}

/*ご利用に関する注意*/
main h2 {
    text-align: center;
    padding:3rem 0 2rem;
    font-size: clamp(1.4rem, 3vw, 2.6rem);
}
/*よくあるご質問*/
main h3 {
    text-align: center;
    font-size: clamp(1.2rem, 2.6vw, 2.2rem);
    padding:2rem 0;
}
/*視聴に際して*/
main h4 {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.6rem);
    margin:1rem 0 0.2rem;
}
/*利用なし*/
main h5 {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    margin: 10px;
    padding: 5px;
    background-color: rgba(240,140,0,0.80);
    color:white;
}

/* スマートフォン */
@media screen and (max-width: 559px) {
main h2 {
    padding:1.6rem 0 0;
}
    main h3 {
    font-size: clamp(1.2rem, 1.4vw, 1.6rem);
    padding:0.2rem 0 0.8rem;
}
}
/*font-size: clamp(16px, 2.6vw, 30px);*/
#support h4 {
    text-align: left;
}

#support .q {
	font-weight:bold;
	color:#06F;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    margin-bottom: 3px;
}
#support .question {
	margin-bottom:10px;
}


.nakawaku{
    padding-bottom: 1rem;
    width:90%;
    margin:auto;
    .naka{
        width:94%;
        margin:0 auto 0.4rem;
    }
}
@media ( max-width : 600px ) {
.nakawaku{
    width:96%;
}}

body#index { background-color: #ccd3e4;}

body#index main h2{ color: #454545;}


/*h1ロゴ*/
.dejisapo_plus{
    background-image: url("../../img/h1c_dejisapo-plus0.png");
    background-size: 100%;background-repeat: no-repeat;background-position: center;
    min-height: 180px;/*23vh*/
    align-content: center;
}
body#s_general h1 {
    text-align: center;
    padding-top: 0.2rem;
    margin: 0.2rem 0;
}

@media screen and (max-width:600px) {/*ＭＡＸ ベースがＰＣ　これはスマホの指示*/
.dejisapo_plus-smh{
    background-image: url("../../img/h1c-smh_dejisapo-plus0.png");
    background-size: 100%;background-repeat: no-repeat;background-position: center;
    min-height: 90px;/*110px*/
}
body#s_general h1  {
    text-align: left;
    font-size: 16px;
    padding-top: 0.1rem;
    padding-left:0.4rem;
    margin:0.2rem 0 0;
    letter-spacing: -0.08rem;
p{
    background-color: #fff;
    border-radius: 0.6rem;
    width:10rem;
    padding-left:0.6rem;
}
}}

@media screen and (max-width:375px) {
.dejisapo_plus-smh{
    background-image: url("../../img/h1c-smh_dejisapo-plus0.png");
    background-size: 100%;background-repeat: no-repeat;background-position: center;
    min-height: 76px;
}
body#s_general h1 {
    font-size: 3.2vw;
    padding-top: 0.1rem;
    margin:0.6rem 0;
    letter-spacing: -0.08rem;
}
}

header {
    width:100%;
    background-color:#FFF;
    padding: 0.02rem;
    box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.3), -1px -3px 5px -3px rgba(0, 0, 0, 0.25);
}
header.level02 div { max-width:960px; margin:auto;}
header.level02 h1 { display:inline-block; width:100%;}

 /* タブレット */
@media screen and (min-width: 560px) and (max-width: 959px) {
header{ width:100%;}
header.level02 h1 {width:100%;}
}
/* スマートフォン */
@media screen and (max-width: 559px) {
header{ width:100%;}
header h1 {w idth:100%;}
header h1 a{ font-size: clamp(0.9rem, 1vw, 1rem);}
header h1 a img{ width:100%;}
header.level02{	max-width:800px; margin:auto;}
header.level02 h1{ width:100%;}
header.level02 h1 a{
    font-size: clamp(0.9rem, 1vw, 1rem);
    text-align: center;}
header.level02 h1 a img{width:100%;}}

footer p {
text-align: center;
}



.kakomu_maru{
	padding:0.03rem 0.3rem 0rem 0.3rem;
	margin:0 4px 1px 4px;
	border:1px solid #0066c0;/*777*/
	border-radius:50px;
	font-family:inherit;
	font-size:1em;
    font-weight: bold;
    color: inherit;/*#333*/
    vertical-align: middle;
}

.mt1 {margin-top: 1rem;}
.mt2 {margin-top: 2rem;}
.mt3 {margin-top: 3rem;}
.mt4 {margin-top: 4rem;}

.mb04 {margin-bottom:0.4rem;}
.mb1 {margin-bottom:1rem;}
.mb2 {margin-bottom:2rem;}
.mb3 {margin-bottom:3rem;}
.mb4 {margin-bottom:4rem;}
.mb5 {margin-bottom:5rem;}
.mb8 {margin-bottom:8rem;}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.only_pc { display: block !important; }
.only_sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
.only_pc { display: none !important; }
.only_sp { display: block !important; }
img { max-width: 100%; }
    }

@media screen and (max-width:600px) {/*ＭＡＸ ベースがＰＣ　これはスマホの指示*/
br.only_desktop,.only_desktop {	display: none;}}

/*PCの設定*/
@media ( min-width : 600px ) {
br.only_mobile,img.only_mobile,.only_mobile {display: none;}}



/* インデント*/
.sage05 {padding-left: 0.5rem;}
.sage3 {padding-left: 3rem;}
.sage1 {padding-left: 1rem;}
/* 1行目だけインデント 長文読解の一字下げ */
.sage-1only {text-indent: 1rem;}

/* 会話揃え 2行目以降インデント5rem */
.sage-2ikou5,.sage-2ikou5 li{    padding-left: 5rem;    text-indent: -5rem;}
/* 会話揃え 2行目以降インデント4rem */
.sage-2ikou4,.sage-2ikou4 li{    padding-left: 4rem;    text-indent: -4rem;}
/* 会話揃え 2行目以降インデント3.5rem */
.sage-2ikou35,.sage-2ikou35 li{    padding-left: 3.5rem;    text-indent: -3.5rem;}
/* 会話揃え 2行目以降インデント3rem */
.sage-2ikou3,.sage-2ikou3 li{    padding-left: 3rem;    text-indent: -3rem;}
/* 会話揃え 2行目以降インデント2.5rem */
.sage-2ikoux,.sage-2ikoux li{    padding-left: 2.5rem;    text-indent: -2.5rem;}
/* 会話揃え 2行目以降インデント1.4rem */
.sage-2ikou,.sage-2ikou li{    padding-left: 1.4rem;    text-indent: -1.4rem;}

.general{
    margin-bottom: 1rem;
    padding-left: 1.4rem;
    text-indent: -1.4rem;
}
@media screen and (max-width:600px) {
.general{
    padding-left: 1rem;
    text-indent: -1rem;
    li{
        padding:0.2rem 0;
    }
}
}