@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');



/* ==============================================
setting
============================================== */

* {
margin:0;
padding:0;
}
#sindan_check body{
overflow-x: hidden;
}
#sindan_check h1,#sindan_check h2,#sindan_check h3,#sindan_check h4,#sindan_check h5,#sindan_check p,#sindan_check th,#sindan_check td,#sindan_check dt,#sindan_check dd,#sindan_check li,#sindan_check input,#sindan_check select {
font-family:"Roboto","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-weight:400;
font-size: 15px;
line-height: 28px;
letter-spacing: 0.5px;
margin:0;
padding:0;
color:#222222;
}
#sindan_check h1,#sindan_check h2,#sindan_check h3,#sindan_check h4,#sindan_check h5,#sindan_check div,#sindan_check table,#sindan_check th,#sindan_check td,#sindan_check dl,#sindan_check dt,#sindan_check dd,#sindan_check ul,#sindan_check li,#sindan_check p,#sindan_check a,#sindan_check strong,#sindan_check span,#sindan_check input,#sindan_check select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#sindan_result h1,#sindan_result h2,#sindan_result h3,#sindan_result h4,#sindan_result h5,#sindan_result p,#sindan_result th,#sindan_result td,#sindan_result dt,#sindan_result dd,#sindan_result li,#sindan_result input,#sindan_result select {
font-family:"Roboto","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-weight:400;
font-size: 15px;
line-height: 28px;
letter-spacing: 0.5px;
margin:0;
padding:0;
color:#222222;
}
#sindan_result h1,#ssindan_result h2,#sindan_result h3,#sindan_result h4,#ssindan_result h5,#ssindan_result div,#sindan_result table,#sindan_result th,#sindan_result td,#sindan_result dl,#sindan_result dt,#sindan_result dd,#ssindan_result ul,#sindan_result li,#sindan_result p,#sindan_result a,#sindan_result strong,#sindan_result span,#sindan_result input,#sindan_result select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#sindan_check img,#sindan_result img{
width: 100%;
height: auto;
border:none;
vertical-align:middle;
}
#sindan_check table,#sindan_result table{
border-collapse:collapse;
border-spacing:0;
}
#sindan_check ul,#sindan_result ul{
list-style:none;
}
sup {
font-size: 10px;
line-height: 10px;
}
ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html ul { display:inline-block; }
*:first-child+html ul { display:inline-block; }

a:link {color:#222222; text-decoration:none;}
a:visited {color:#222222; text-decoration:none;}
a:active {color:#222222; text-decoration:none;}
a{
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
a:hover{
opacity: 0.7;
}



.pc{
display:none!important;
}

/* ==============================================
footer
============================================== */

footer{
background: #FFF;
padding: 0 0 40px 0;
}
footer nav{
}
footer nav ul{
text-align: center;
padding: 35px 0 0 0;
}
footer nav ul li{
display: inline-block;
padding: 0 5px;
}
footer nav ul li a{
}
footer p{
font-size: 10px;
line-height: 15px;
text-align: center;
padding: 10px 0 0 0;
}

/* ==============================================
#sindan_check 
============================================== */
#sindan_check {
background: #fff;
}
/*introduction*/
#sindan_check #introduction h1{
padding: 20px 0 0 0;
}
#sindan_check #introduction p{
font-size: 14px;
line-height: 24px;	
margin:0 5%;
padding:20px 0 20px 0;
text-align:left;
font-weight: 500;
}


#sindan_check #introduction .instructor{
border: solid 1px #222;
margin: 0 3%;
padding: 0 0 0px 0;
}

#sindan_check #introduction .instructor .instructor_name{
padding: 20px 0 0 0;
position: relative;
}
#sindan_check #introduction .instructor .instructor_name::before{
content: "";
background: url("../images/sn_ch_main_tc.png")no-repeat;
background-size:cover;
background-position: center;
width:30%;
height: 100%;
position: absolute;
top:15%;
left:5%;
}
#sindan_check #introduction .instructor .instructor_name p{
text-align: left;
padding: 10px 0 0 40%;
margin: 0;
}

#sindan_check #introduction .instructor .instructor_name h3{
font-size: 16px;
line-height: 26px;
font-weight: 500;
text-align: left;
padding: 0 0 0 40%;
margin: 0;
}
#sindan_check #introduction .instructor .instructor_name span{
font-size: 12px;
line-height: 20px;	
text-align: left;
}
#sindan_check #introduction .instructor p{
font-size: 12px;
line-height: 20px;	
margin:0 5%;
text-align: left;
}
#sindan_check #introduction .instructor p a{
text-decoration: underline;
}
/*checklist*/
#sindan_check #checklist{
margin: 40px 0 0 0;
}

#sindan_check #checklist .note{
font-size: 12px;
line-height: 20px;	
margin:0 5%;
padding:10px 0 20px 0;
text-align: left;
}
#sindan_check #checklist h2{
font-size: 14px;
line-height: 24px;
text-align: center;
background: #e3e3e3;
margin: 0 5%;
padding: 5px 0;
}
#sindan_check #checklist h4{
font-size: 14px;
line-height: 24px;
font-weight: 600;
text-align: center;
margin:0 5%;
padding: 0 0 10px 0;
position: relative;
}
#sindan_check #checklist h4 span{
font-size: 14px;
line-height: 24px;
font-weight: 600;
color:#ef858c;
}
#sindan_check #checklist h4::before{
position: absolute;
content: '';
width: 4px;
height: 35px;
background: #ef858c;
top:5px;
left:3%;
transform: rotate(-30deg)
}
#sindan_check #checklist h4::after{
position: absolute;
content: '';
width: 4px;
height: 35px;
background: #ef858c;
top:5px;
right:3%;
transform: rotate(30deg)
}


#sindan_check #checklist .listA{
background: #f0f8ff;
border: solid 4px #bddaf2;
border-radius: 10px;
padding:30px 0 20px 0;
position: relative;
margin:40px 3% 0 3%;
}
#sindan_check #checklist .listB{
background: #ffe9eb;
border: solid 4px #fcbebf;
border-radius: 10px;
padding:30px 0 20px 0;
position: relative;
margin:40px 3% 0 3%;
}
#sindan_check #checklist .listC{
background: #f3ffe7;
border: solid 4px #aed985;
border-radius: 10px;
padding:30px 0 20px 0;
position: relative;
margin:40px 3% 0 3%;
}
#sindan_check #checklist .listD{
background: #f1eeff;
border: solid 4px #cbc3ea;
border-radius: 10px;
padding:30px 0 20px 0;
position: relative;
margin:40px 3% 0 3%;
}
#sindan_check #checklist .listE{
background: #ffffe2;
border: solid 4px #ffe750;
border-radius: 10px;
padding:30px 0 20px 0;
position: relative;
margin:40px 3% 0 3%;
}
#sindan_check #checklist h3{
position:absolute;
top:-30px;
left: 0;
right: 0;
margin: 0 auto;
max-width: 600px;
}
#sindan_check #checklist ul{
padding: 0 3%;
}
#sindan_check #checklist ul li{
font-size: 14px;
line-height: 24px;
font-weight: 500;
padding:7px 0 5px 0;
margin:0;
position: relative;
}
#sindan_check #checklist ul li label{
padding:0;
margin:0;
}

#sindan_check input[type="checkbox"] {
margin:0;
padding:0;
background: none;
border: none;
border-radius:0;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
vertical-align:middle;
}


/* チェックボックスデザイン */
#sindan_check input[type="checkbox"]{
cursor: pointer;
vertical-align:middle;
padding-left:30px;
}

#sindan_check input[type="checkbox"]::before{
content: "";
display:block; 
position:absolute;
background-color: #fff;
border-radius: 0%;
border:2px solid #666464;
box-sizing: border-box;
width:18px;/*チェックボックスの横幅*/
height:18px;/*チェックボックスの縦幅*/
top:10px;
left: 5px;
}

#sindan_check input[type="checkbox"]::after {
content: "";
display:block; 
position:absolute;
border-bottom: 3px solid #f96d70;/*チェックの太さ*/
border-left: 3px solid #f96d70;/*チェックの太さ*/
opacity:0;/*チェック前は非表示*/
height:6px;/*チェックの高さ*/
width:12px;/*チェックの横幅*/
transform:rotate(-45deg);
vertical-align:middle;
top:12px;/*チェック時の位置調整*/
left:7px;/*チェック時の位置調整*/
}

 #sindan_check input[type="checkbox"]:checked::after {
opacity: 1;/*チェック後表示*/
}
#sindan_check #checklist .button{
margin:40px auto;
}

#sindan_check #checklist .button a{
display:block;
background:#ef858c;
color:#fff;
width:80%;
margin: 0 auto;
padding:15px 0 15px 0;
font-size: 16px;
line-height: 24px;
font-weight: 600;
text-align: center;
border-radius: 30px;
box-shadow:0px 5px 0px 0px rgba(209, 87, 90, 1);
}


/*banner_aera*/
#sindan_check #banner_aera ul{
padding:20px 0;
}
#sindan_check #banner_aera ul li{
padding:10px 5%;
margin: 0 10px;
}


#sindan_check #news{
margin:20px 3% 40px 3%;
}
#sindan_check #news h2{
font-size: 16px;
line-height: 24px;
padding:0 0 10px 0;
border-bottom: solid 1px #666;
}
#sindan_check #news ul{
}
#sindan_check #news ul li{
padding:10px 0 0px 0;
margin: 5px 0;
}

#sindan_check #news .article_img{
width: 30%;
float: left;
padding:0 10px 0 0;
}
#sindan_check #news .article_img img{
width:100%;
height:80px;
object-fit: cover;
}
#sindan_check #news .article_txt{
padding:10px 5% 10px 30%;
}
#sindan_check #news .article_txt:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #sindan_check #news .article_txt { display:inline-block; }
*:first-child+html #sindan_check #news .article_txt { display:inline-block; }

#sindan_check #news h3{
font-size: 1.4rem;
line-height: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
#sindan_check #news .mb_xsmall{
font-size: 1.2rem;
line-height: 1.4rem;
margin-bottom: 10px;
}



/* ==============================================
#sindan_result
============================================== */

#sindan_result {
background: #fff;
}
/*introduction*/
#sindan_result #introduction h1{
padding: 20px 0 0 0;
}
#sindan_result #introduction p{
font-size: 14px;
line-height: 24px;	
margin:0 5%;
padding:20px 0 20px 0;
text-align:left;
font-weight: 500;
}

#sindan_result #result .character {
font-size: 14px;
line-height: 24px;
text-align: center;
margin: 0 auto;
padding: 10px 0 20px 0;
}
#sindan_result #result .character a{
font-size: 20px;
line-height: 24px;
font-weight: 600;
text-decoration: underline;
}
#sindan_result #result .character a{
font-size: 20px;
line-height: 24px;
font-weight: 600;
text-decoration: underline;
}
#sindan_result .hiyo_type{
background:#e4f2fe;
}
#sindan_result .suzu_type{
background:#ffe9eb;
}
#sindan_result .kar_type{
background:#dbefc9;
}
#sindan_result .tukk_type{
background:#dce5ff;
}
#sindan_result .takk_type{
background:#fffec3;
}
#sindan_result p{
font-size: 14px;
line-height: 24px;
margin:0 8%;
padding:20px 0 20px 0;
}
#sindan_result .point{
font-size: 14px;
line-height: 24px;
margin:0 5%;
background:#fff;
border-radius: 10px;
padding: 10px 0;
}
#sindan_result .point h3{
font-size: 16px;
line-height: 24px;
font-weight: 600;
text-align: center;
margin:0 5%;
background:#fff;
padding: 10px 0;
border-bottom: dotted 2px #3e3e3e;
}
#sindan_result .point h3 span{
color:#ff666b;
}
#sindan_result .point ul{
margin:10px 8%;

}
#sindan_result .point ul li{
margin:20px 0;
font-size: 14px;
line-height: 24px;
font-weight: 500;
}
#sindan_result .hiyo_type .point ul li::before{
content: '●';
color:#2388dc;
}
#sindan_result .suzu_type .point ul li::before{
content: '●';
color:#ff9698;
}
#sindan_result .kar_type .point ul li::before{
content: '●';
color:#71c124;
}
#sindan_result .tukk_type .point ul li::before{
content: '●';
color:#7e6cce;
}
#sindan_result .takk_type .point ul li::before{
content: '●';
color:#fbba27;
}
#sindan_result .point h4{
font-size: 14px;
line-height: 24px;
font-weight: 600;
background: #e3e3e3;
text-align: center;
margin:0 5%;
padding:3px 0;
border-radius: 20px;
}

#sindan_result .sns_share p{
font-size: 14px;
line-height: 24px;
font-weight: 600;
text-align: center;
margin:25px 5%;
padding:3px 0;
position: relative;
}
#sindan_result .sns_share p span{
font-size: 14px;
line-height: 24px;
font-weight: 600;
color: #FF657B;
}
#sindan_result .sns_share p::before{
position: absolute;
content: '';
width: 2px;
height: 50px;
background: #666;
top:0px;
left:8%;
transform: rotate(-30deg)
}
#sindan_result .sns_share p::after{
position: absolute;
content: '';
width: 2px;
height: 50px;
background: #666;
top:0px;
right:8%;
transform: rotate(30deg)
}
#sindan_result .sns_share ul{
display: flex;
margin:0 5%;
}
#sindan_result .sns_share li{
width: 30%;
margin: 0 10px;
}
#sindan_result .sns_share li a{
display: block;
font-size: 14px;
line-height: 24px;
font-weight: 600;
padding: 8px 0 8px 0;
text-align: center;
color: #fff;
background: #444;
border-radius: 10px;
box-shadow:0px 3px 2px 0px rgba(0, 0, 10, 0.2);
}
#sindan_result .sns_share li:nth-child(1) a{
background: #0086e3;
}
#sindan_result .sns_share li:nth-child(2) a{
background: #019b34;
}
#sindan_result .sns_share li:nth-child(3) a{
background: #00127e;
}

#sindan_result .image_download p{
font-size: 14px;
line-height: 24px;
font-weight: 600;
text-align: center;
margin:20px 5% 10px 5%;
padding:3px 0;
position: relative;
}

#sindan_result .image_download .button{
margin:10px auto 0 auto;
padding: 0 0 0px 0;
}
#sindan_result .image_download .button a{
display:block;
background:#ff666b;
margin: 0 auto;
color:#fff;
width:85%;
padding:13px 0 15px 0;
font-size: 14px;
line-height: 24px;
font-weight: 600;
text-align: center;
border-radius:10px;
box-shadow:0px 3px 2px 0px rgba(0, 0, 10, 0.2);
}
#sindan_result .sns_cp{
padding:25px 0 40px 0;
}


#sindan_result .sns_cp a{
margin: 0 5%;
}
#sindan_result .sns_cp a img{
width:90%;
}


#sindan_result .button{
margin:40px auto 0 auto;
padding: 0 0 20px 0;
}
#sindan_result .button a{
display:block;
background: #e3e3e3;;
margin: 0 auto;
color:#222;
width:80%;
padding:15px 0 15px 0;
font-size: 16px;
line-height: 24px;
font-weight: 600;
text-align: center;
border-radius: 30px;
box-shadow:0px 3px 2px 0px rgba(0, 0, 10, 0.2);
}

#sindan_result .other_type h3{
font-size: 16px;
line-height: 24px;
font-weight: 600;
text-align: center;
margin:20px 0 10px 0;
}
#sindan_result .other_type ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto;
}
#sindan_result .other_type ul li{
width:43%;
background: #888;
margin:5px 5px;
padding:10px 0;
border-radius:10px;
text-align: center;
font-size: 12px;
line-height:18px;
font-weight: 600;
box-shadow:0px 1px 1px 0px rgba(0, 0, 10, 0.2);
}
#sindan_result .other_type ul li a{
display: block;
}
#sindan_result .other_type ul .typeA{
background:#e4f2fe;
}
#sindan_result .other_type ul .typeB{
background:#ffaab0;
}
#sindan_result .other_type ul .typeC{
background:#c2f095;
}
#sindan_result .other_type ul .typeD{
background:#c7a8e9;
}
#sindan_result .other_type ul .typeE{
background:#ffd658;
}

/*banner_aera*/

#sindan_result #banner_aera p{
font-size: 14px;
line-height: 24px;
font-weight: 600;
text-align: center;
margin:25px 3% 0px 3%;
letter-spacing: 0.5px;
padding:3px 0;
}
#sindan_result #banner_aera ul{
padding:10px 0;
}
#sindan_result #banner_aera ul li{
padding:10px 5%;
margin: 0 10px;
}


#sindan_result #news{
margin:20px 3% 40px 3%;
}
#sindan_result #news h2{
font-size: 16px;
line-height: 24px;
padding:0 0 10px 0;
border-bottom: solid 1px #666;
}
#sindan_result #news ul{
}
#sindan_result #news ul li{
padding:10px 0 0px 0;
margin: 5px 0;
}

#sindan_result #news .article_img{
width: 30%;
float: left;
padding:0 10px 0 0;
}
#sindan_result #news .article_img img{
width:100%;
height:80px;
object-fit: cover;
}
#sindan_result #news .article_txt{
padding:10px 5% 10px 30%;
}
#sindan_result #news .article_txt:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #sindan_result #news .article_txt { display:inline-block; }
*:first-child+html #sindan_result #news .article_txt { display:inline-block; }

#sindan_result #news h3{
font-size: 1.4rem;
line-height: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
#sindan_result #news .mb_xsmall{
font-size: 1.2rem;
line-height: 1.4rem;
margin-bottom: 10px;
text-align: left;
padding: 0;
margin: 0;
}