@charset "UTF-8";

/* CSS Document */
:root {
  --font-family-en: 'Roboto', sans-serif;
  --font-family-en-2: 'Arial', sans-serif;
  --font-family-en-3: 'Oswald', sans-serif;
  --font-family-M: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  --font-family-J: 'Noto Sans JP', sans-serif;
  --red: #F80000;
  --orange: #FF8000;
  --blue: #39A1DD;
  --black: #000;
}




/* ミディアムデバイス (タブレット) のスタイル */
@media (max-width: 1024px) {
	
	.header{
	width: 100%;
	height: 80px;	
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	padding-top: 18px;	
	}
	
	h3{
	width: 100%;
	height: 44px;
	background:url("../images/h3_qna.png") no-repeat center center;
	background-size: contain;
	}
	.contents {
		width: 400px;
        position: relative;	
        padding-bottom: 40px;
    }
	 .list-container {
                width: 100%; /* スマホは画面いっぱい */
            }
            .list li {
                width: 100%; /* 1列表示 */
                float: none;
            }
	
	#qna .filters {
    margin-bottom: 10px;
	background: #CBE2FF;
	width: 400px;
	margin: 0 auto;
	padding: 10px 0 20px;
}

        #qna .filter {
			width: 360px;
            background: #FFF;
			height: 50px;
			line-height: 46px;
            border-radius: 25px;
            cursor: pointer;
            user-select: none;
            text-align: center;
            transition: background 0.3s ease;
			font-size: 22px;
			font-weight: 600;
			margin: 10px auto 0;
        }



        #qna .list-container {
            overflow: hidden;
        }
        #qna .list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #qna .list li {
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            display: block;
            opacity: 1;
            transform: translateX(0) rotate(0);
            transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #qna .list li.hidden {
            opacity: 0;
            transform: translateX(-100px) rotate(-10deg);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
	
	#qna .list-container {
        width: 400px;
		margin: 20px auto 0;
            }
    #qna .list li {
        width: 360px;
		padding: 10px 10px 20px;
		margin: 0 auto 20px;
            }
	#qna ul.list li dl{
	}
	
	#qna ul.list li dl dt {
    padding-left: 42px;  
    min-height: 34px;
    display: flex; 
    align-items: center; 
    line-height: 1.4;   
    margin-bottom: 10px;
	font-size: 18px;
	font-weight: 600;
}
	#qna ul.list li dl dd{
	background:url("../images/qna_a.png") no-repeat top left;
	 background-size: 34px 34px;
	padding-left: 42px;
	padding-right: 0px;	
	padding-top: 4px;	
	min-height: 60px;
	line-height: 1.4;   
	vertical-align: middle;	
	font-size: 16px;
	font-weight: 400;	
	}
	
	#qna ul.list li dl dd img{
		width: 100%;
	}
	
	#qna ul.list li.category1{
		border: 2px solid #21B5C0;
	}
	#qna ul.list li.category1 dl dt{
		background: url("../images/qna_q.png") no-repeat top left;
    background-size: 34px 34px;
	}
	#qna ul.list li.category2{
		border: 2px solid #019AD2;
	}
	#qna ul.list li.category2 dl dt{
		background: url("../images/qna_q2.png") no-repeat top left;
    background-size: 34px 34px;
	}
	#qna ul.list li.category3{
		border: 2px solid #FF7701;
	}
	#qna ul.list li.category3 dl dt{
		background: url("../images/qna_q3.png") no-repeat top left;
     background-size: 34px 34px;
	}
	#qna ul.list li.category4{
		border: 2px solid #FE6EB6;
	}
	#qna ul.list li.category4 dl dt{
		background: url("../images/qna_q4.png") no-repeat top left;
     background-size: 34px 34px;
	}
	#qna ul.list li.category5{
		border: 2px solid #C36DD8;
	}
	#qna ul.list li.category5 dl dt{
		background: url("../images/qna_q5.png") no-repeat top left;
     background-size: 34px 34px;
	}
	
	#qna .filter.qna_btn1 {
            border: 2px solid #21B5C0;
		color: #21B5C0;
        }
        #qna .filter.qna_btn1.active {
            background: #21B5C0;
            color: #fff;
        }
	#qna .filter.qna_btn2 {
            border: 2px solid #019AD2;
		color: #019AD2;
        }
        #qna .filter.qna_btn2.active {
            background: #019AD2;
            color: #fff;
        }
	#qna .filter.qna_btn3 {
            border: 2px solid #FF7701;
		color: #FF7701;
        }
        #qna .filter.qna_btn3.active {
            background: #FF7701;
            color: #fff;
        }
	#qna .filter.qna_btn4 {
            border: 2px solid #FE6EB6;
		color: #FE6EB6;
        }
        #qna .filter.qna_btn4.active {
            background: #FE6EB6;
            color: #fff;
        }
	#qna .filter.qna_btn5 {
            border: 2px solid #C36DD8;
		color: #C36DD8;
        }
        #qna .filter.qna_btn5.active {
            background: #C36DD8;
            color: #fff;
        }
	#qna p{
		padding-left: 20px;
		background: url("../images/qna_p.png") no-repeat 4px 7px;
    background-size: 10px 10px;
		margin-bottom: 10px;
	}
	#qna dd a{
		color: #000;
		font-weight: 700;
		margin: 0 2px;
		text-decoration: none;
	}

	
	
	.qna_small{
		font-size: 14px;
		line-height: 1;
	}
	

}

/* ラージデバイス (デスクトップ) のスタイル */
@media (min-width: 1025px) {
	.contents{
		width: 94.8%;
		padding-bottom: 40px;}

	.header{
	width: 100%;
	height: 110px;
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	}
	
	h3{
	width: 100%;
	height: 110px;
	background:url("../images/h3_qna.png") no-repeat center center;
	background-size: 290px 57px;
	}
	
	#qna .filters {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
	background: #CBE2FF;
	width: 1700px;
	height: 80px;
	margin: 0 auto;
	padding: 10px 70px;
}

        #qna .filter {
            padding: 0px 40px;
            background: #FFF;
			height: 60px;
			line-height: 56px;
            border-radius: 30px;
            cursor: pointer;
            user-select: none;
            text-align: center;
            transition: background 0.3s ease;
			font-size: 22px;
			font-weight: 600;
        }



        #qna .list-container {
            overflow: hidden;
        }
        #qna .list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #qna .list li {
            border-radius: 10px;
            padding: 10px;
            float: left;
            margin-bottom: 10px;
            display: block;
            opacity: 1;
            transform: translateX(0) rotate(0);
            transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #qna .list li.hidden {
            opacity: 0;
            transform: translateX(-100px) rotate(-10deg);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
	
	#qna .list-container {
        width: 1700px;
		margin: 40px auto 0;
		padding-left: 20px;
            }
    #qna .list li {
        width: 540px;
		padding: 20px 20px 30px;
		margin: 0 20px 20px 0;
		min-height: 220px;
            }
	#qna ul.list li dl{
	}
	
	#qna ul.list li dl dt {
    padding-left: 60px;  
    min-height: 50px;
    display: flex; 
    align-items: center; 
    line-height: 1.4;   
    margin-bottom: 10px;
	font-size: 21px;
	font-weight: 600;
}
	#qna ul.list li dl dd{
	background:url("../images/qna_a.png") no-repeat top left;
	background-size: 48px 48px;
	padding-left: 60px;
	padding-right: 10px;	
	padding-top: 12px;	
	min-height: 60px;
	line-height: 1.4;   
	vertical-align: middle;	
	font-size: 18px;
	font-weight: 400;	
	}
	
	#qna ul.list li.category1{
		border: 2px solid #21B5C0;
	}
	#qna ul.list li.category1 dl dt{
		background: url("../images/qna_q.png") no-repeat top left;
    background-size: 48px 48px;
	}
	#qna ul.list li.category2{
		border: 2px solid #019AD2;
	}
	#qna ul.list li.category2 dl dt{
		background: url("../images/qna_q2.png") no-repeat top left;
    background-size: 48px 48px;
	}
	#qna ul.list li.category3{
		border: 2px solid #FF7701;
	}
	#qna ul.list li.category3 dl dt{
		background: url("../images/qna_q3.png") no-repeat top left;
    background-size: 48px 48px;
	}
	#qna ul.list li.category4{
		border: 2px solid #FE6EB6;
	}
	#qna ul.list li.category4 dl dt{
		background: url("../images/qna_q4.png") no-repeat top left;
    background-size: 48px 48px;
	}
	#qna ul.list li.category5{
		border: 2px solid #C36DD8;
	}
	#qna ul.list li.category5 dl dt{
		background: url("../images/qna_q5.png") no-repeat top left;
    background-size: 48px 48px;
	}
	
	#qna .filter.qna_btn1 {
            border: 2px solid #21B5C0;
		color: #21B5C0;
        }
        #qna .filter.qna_btn1.active {
            background: #21B5C0;
            color: #fff;
        }
	#qna .filter.qna_btn2 {
            border: 2px solid #019AD2;
		color: #019AD2;
        }
        #qna .filter.qna_btn2.active {
            background: #019AD2;
            color: #fff;
        }
	#qna .filter.qna_btn3 {
            border: 2px solid #FF7701;
		color: #FF7701;
        }
        #qna .filter.qna_btn3.active {
            background: #FF7701;
            color: #fff;
        }
	#qna .filter.qna_btn4 {
            border: 2px solid #FE6EB6;
		color: #FE6EB6;
        }
        #qna .filter.qna_btn4.active {
            background: #FE6EB6;
            color: #fff;
        }
	#qna .filter.qna_btn5 {
            border: 2px solid #C36DD8;
		color: #C36DD8;
        }
        #qna .filter.qna_btn5.active {
            background: #C36DD8;
            color: #fff;
        }
	#qna p{
		padding-left: 20px;
		background: url("../images/qna_p.png") no-repeat 4px 10px;
    background-size: 10px 10px;
		margin-bottom: 10px;
	}
	#qna dd a{
		color: #000;
		font-weight: 700;
		margin: 0 2px;
		text-decoration: none;
	}

	
	
	.qna_small{
		font-size: 16px;
		line-height: 1;
	}
	
}