@charset "utf-8";
/* CSS Document */

/*memo*/
.brown,.white{
	position: relative;
}

.brown .memo-contents {
    padding: 1em;
	box-sizing: border-box;
    background-color: #efe2d0;
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px #efe2d0,
                1px 1px 0 1px #d9d9d9de,
                2px 2px 0 1px #fff,
                3px 3px 0 1px #d9d9d9de,
                4px 4px 0 1px #fff,
                5px 5px 0 1px #d9d9d9de,
                6px 6px 0 1px #fff,
                9px 9px 0 1px #efe2d0,
                10px 10px 4px 2px #d9d9d9de;
}

.brown .memo-contents.flex_title {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 3em;
	height: 15.8em;
}

.brown .memo-contents .text {
	text-align: center;
}

.brown .memo-contents .img_wh {
	margin-top: auto;
}

.brown .memo-contents .img_wf {
	margin-bottom: auto;
}

.ring {
	width: 2.3em;
	background-image: url(/support/home-theater/images/study/ring.png);
    position: absolute;
    top: 0.5em;
    left: -0.82em;
	bottom: calc(7 / 1078 * 100%);
}

.white .memo-contents {
	text-align: center;
	padding: 1em;
	box-sizing: border-box;
    background-color: #ffffff14;
    border: none;
	border-radius: 7px;
	box-shadow: 0px 0px 0 1px #ccc, 
		1px 1px 0 1px #ccc, 
		2px 2px 0 1px #fff, 
		3px 3px 0 1px #ccc,
		4px 4px 0 1px #fff, 
		5px 5px 0 1px #ccc, 
		6px 6px 0 1px #fff, 
		9px 9px 0 1px #ccc, 
		10px 10px 4px 2px #ccc;
}

.h_235{
	height: 14.7em;
}

.h_400{
	height: 25em;
}

.ring2 {
    width: 2.3em;
	background: url(/support/home-theater/images/study/ring2.png);
    position: absolute;
    top: 0.7em;
    left: -0.85em;
	bottom: calc(9 / 235 * 100%);
}

.ring3 {
    width: 2.3em;
	background: url(/support/home-theater/images/study/ring2.png);
    position: absolute;
    top: 0.8em;
    left: -0.85em;
	bottom: calc(10 / 400 * 100%);
}

/*fusen*/
ul.fusen {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 3em auto 2.5em;
}

ul.fusen.g_5{
	gap: 5em;
}

ul.fusen.wrap {
	gap: 2.5em;
}

ul.fusen.wrap::after {
	display: block;
	content:"";
	width: 295px;
}

ul.fusen li {
	border: 1px solid #8d8d8d;
	width: 295px;
	background-color: #f5f5f5;
	position: relative;
}

ul.fusen li a {
    font-size: 1rem;
	display: block;
    padding: 0.5em 1em;
}

ul.fusen.g_5 li a {
	display: flex;
	align-items: center;
}

ul.fusen li.fusen_y a{
    border-right: 27px solid #ffe001;
	height: 3.3em;
}

ul.fusen li.fusen_b a {
    border-right: 27px solid #9AD0DC;
	height: 3.3em;
}

ul.fusen li.fusen_g a {
    border-right: 27px solid #9BC9A5;
}

ul.fusen li a::before {
    position: absolute;
    bottom: 5px;
    right: 0;
    z-index: -1;
    transform: rotate(5deg);
    width: 100%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(1px);
}

ul.fusen li .point_no {
	display: block;
	color: #06601C;
	text-align: left;
	font-weight: bold;
}

ul.fusen .text {
    display: block;
	text-align: left;
	font-weight: bold;
}

ul.fusen li.fusen_g .text {
	padding-left: 0.5em;
}

ul.fusen .text_c{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	font-weight: bold;
}


section{
	margin: 3.5em 0;
}

/*
h1 {	
	font-size: 2.25rem;
	font-weight: normal;
	margin-bottom: 0.2em;
}
*/

/*
h2 {
	font-size: 1.75rem; 
	font-weight: normal;
	margin: 0 auto;
    padding: 0 0.5em;
    width: fit-content;
}
*/

h2 { 
	display: flex;
	align-items: flex-end;
	margin-bottom: 2em;
}

h2 img{
	height: 3em;
}

h2.pencil_y > span{ 
	font-size: 1.5625rem;
	font-weight: normal;
	box-shadow: 0px -7px 6px -6px rgb(255,206,19) inset, 0px 7px 5px -9px rgb(255,206,19);
    padding: 0 0 0.2em 0.2em;
	width: 100%;
}

h2.pencil_b > span{ 
	font-size: 1.5625rem;
	font-weight: normal;
	box-shadow: 0px -7px 6px -6px rgb(95,195,210) inset, 0px 7px 5px -9px rgb(95,195,210);
    padding: 0 0 0.2em 0.2em;
	width: 100%;
}

h2.pencil_g > span{ 
	font-size: 1.5625rem;
	font-weight: normal;
	box-shadow: 0px -7px 6px -6px rgb(116,189,138) inset, 0px 7px 5px -9px rgb(116,189,138);
    padding: 0 0 0.2em 0.2em;
	width: 100%;
}

h2.pencil_g > span > span.green{ 
	color: #06601C;
	font-weight: bold;
	margin-right: 0.5em;
}

h3 { 
	display: flex;
    align-items: center;
	font-size: 1.3125rem;
	font-weight: normal;
	margin-bottom: 0;
}

h3.pin_y::before {
  content: url("/support/home-theater/images/study/pin_yellow.png");
  margin-right: 0.8em;
}

h3.pin_b::before {
  content: url("/support/home-theater/images/study/pin_blue.png");
  margin-right: 0.8em;
}

h3.pin_g::before {
  content: url("/support/home-theater/images/study/pin_green.png");
  margin-right: 0.8em; 
}

.mt_1em {
	margin-top: 1em;
}

.mt_3em {
	margin-top: 3em;
}

.ml_3em {
	margin-left: 3em!important;
}

.pb_1em {
	padding-bottom: 1em!important;
}

p.lead {
	font-size: 1.5rem;
    margin: 0;
}

.disc {
	margin-left: 2em;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    gap: 2em;
    margin-bottom: 2em;
}

.center {
	text-align: center;
}

.marker {
  background: linear-gradient(transparent 70%, pink 100%);
}

.notice_gray_b {
    background-color: #F5F5F5;
    border: 1px solid #999999;
    margin: 1em 0;
	padding: 0 1em;
}

.pconly{
	display: block;
}

/*stepList*/
ol.stepList {
	list-style-type: none;
	counter-reset: square;
	padding: 0;
}

ol.stepList > li {
	margin-bottom: 1em;
}

ol.stepList > li:last-child {
	margin-bottom: 0;
}

ol.stepList > li:before {
	content: counter(square);
    counter-increment: square;
    color: #000;
    display: block;
    line-height: 1.5em;
    text-align: center;
    height: 1.5em;
    width: 1.5em;
    margin-right: 0.5em;
    font-weight: bold;
    float: left;
	background-color: rgb(137 209 152 / 43%);
	border: #89d198 1px solid;
}

ol.stepList > li > p {
	margin: 0 0 0 2.3em;
}

/*stepList_02*/
ol.stepList_02 {
    counter-reset: step-counter;
    list-style-type: none;
	padding: 0;
}

ol.stepList_02 > li {
    position: relative; 
    margin-bottom: 3em;
}

ol.stepList_02 > li::before {
    content: "STEP " counter(step-counter); 
	counter-increment: step-counter;
    position: absolute; 
    left: 0; 
    top: 0; 
	font-size: 1.2rem;
    font-weight: bold;
	border: 3px solid #9BC9A5; 
    padding: 0.5em;
}

ol.stepList_02 > li span {
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0 0 1.5em 5em;
    padding: 0.6em;
}

ol.stepList_02 > li dl dt {
	font-weight: bold;
}


ol.stepList_02 > li dl dd {
	margin-bottom: 1em;
	margin-left: 0;
}


/*stepList_03*/
ol.stepList_03 {
    list-style: none;
}

.workaround {
    border: 1px solid #8d8d8d;
    padding: 5px;
}

p.annotation {
    padding-left: 1em;
    text-indent: -1em;
	font-size: 1rem;
}

img.s5-iconInline{
	padding: 0 0.5em;
	margin-left: 0;
}

img.icon_window {
    padding-left: 0.25em;
}

.flex a:focus, .flex a:hover, .flex a:active {
    opacity: 0.5;
}

@media (max-width: 1120px){
	.h_400{
		height: 33.6em;
	}
	
	.ring3 {
    	bottom: calc(12 / 537 * 100%);
	}	
}

@media (max-width: 900px) {
	.brown {
		margin-top: 3em;
	}
	
	.brown .memo-contents.flex img {
		height: 100%;
	}
	
	.brown .memo-contents.flex p.lead {
		margin-bottom: 0;
		font-size: 1rem;
	}
/*
	
	h1 {	
		font-size: 1.5rem;
	}
*/
	
/*
	h2 {
		font-size: 1.3125rem;
		margin-left: 1em;
		width: auto;
	}
*/
	
	h2.pencil_y > span{ 
		font-size: 1.3125rem;
	}

	h2.pencil_b > span{ 
		font-size: 1.3125rem;
	}

	h2.pencil_g > span{ 
		font-size: 1.3125rem;
	}
	
	h3 { 
		font-size: 1.1875rem;
	}
	
	.ml_3em {
		margin-left: 0!important;
	}
	
	.disc {
		margin-left: 0!important;
		padding-left: 1.5em;
	}
	
	ul.fusen.g_5 {
		gap: 1em;
	}
	
	ul.fusen.wrap {
		margin-bottom: 1.5em;
	}
	
	.flex img {
	    max-width: 300px;
	}
}

@media (max-width: 782px){
	ul.fusen.wrap {
		gap: 1em;
	}	
}

@media (max-width: 758px){
	.h_235{
		height: 18.2em;
	}
	
	.ring2 {
    	bottom: calc(12 / 320 * 100%);
	}
	
	.h_400{
		height: 42.3em;
	}
	
	.ring3 {
    	bottom: calc(16 / 676 * 100%);
	}
	
	ul.fusen.wrap::after {
		width: 100%;
	}
}

@media (max-width: 730px){	
	.brown .memo-contents.flex_title {
    	flex-direction: column-reverse;
		height: 19.2em;

	}
	
	.brown .memo-contents .img_wh {
		margin-right: auto;
	}

	.brown .memo-contents .img_wf {
		margin-left: auto;
	}
}

@media (max-width: 583px){
	.brown .memo-contents .text{
		margin-left: 1em;
	}
	
	p.lead {
    	font-size: 1rem;
	}

	.ring3 {
    	bottom: calc(16 / 704 * 100%);
	}
	
	ul.fusen.wrap {
		margin: 1.5em 0 0;
	}

}

@media (max-width: 420px){
	.brown .memo-contents .img_wh {
		padding-left: 1em;
		max-height: 85px;
		height: 100%;
	}

	.brown .memo-contents .img_wf {
		max-height: 85px;
    	height: 100%;
	}
	
	ul.fusen {
		justify-content: flex-start;
	}
	
	ul.fusen.g_5 {
		padding-left: 1.4em;
	}

	ul.fusen li {
		width: 100%;
		max-width: 295px;
	}

	ul.fusen li a {
		width: 100%;
		box-sizing: border-box;
	}
	
	ul.fusen.g_5 li,
	ul.fusen li.fusen_y a,
	ul.fusen li.fusen_b a {
		height: 5em;
	}

	ul.fusen.wrap {
		padding-left: 1.4em;
	}
	
	.h_235 {
		height: 13em;
	}
	
	.ring2 {
    	bottom: calc(12 / 320 * 100%);
	}
	
	ol.stepList_02 li span {
		padding: 0 0.6em;
	}
}

@media (max-width: 405px){
	ul.fusen.g_5 {
		margin: 1.5em 0;
	}
	
	.h_235 {
		height: 13em;
	}
}

@media (max-width: 388px){
	.h_235 {
		height: 13em;
	}
	
	.pconly{
		display: none;
	}
}

@media (max-width: 360px){
	.h_400 {
		height: 43em;
	}
	
	.ring3 {
		bottom: calc(27 / 688 * 100%);
	}
}

@media (max-width: 356px){
	.h_400 {
		height: 50em;
	}	
}

@media screen and (max-width: 640px){
	.pct img {
		max-width: 100%;
    	width: auto;
	}
}

.pct a img {
    vertical-align: middle;
}


/* 20241004 */

.c5-mb0{
	margin-bottom: 0;
}

.c5-mt0{
	margin-top: 0;
}

.tableArea{
	width: 86%;
}
.tableArea table{
	width: 100%;
	margin-top: 10px;
	margin-bottom: 1em;
}

.tableArea table thead th,
.tableArea table tbody th,
.tableArea table tbody td{
	padding: 5px;
	border: 1px solid #2f353d;
}
.tableArea table thead th{
	width: 13.8%;
	padding: 8px 5px;
	text-align: center;
	background-color: #f5f5f5;
	word-break: break-all;
}

.tableArea table thead th a{
	text-decoration: underline;
}
.tableArea table thead th:first-child{
	width: 17.2%;
}
.tableArea table tbody th{
	padding: 5px 10px;
	text-align: left;
	word-break: break-all;
}
.tableArea table tbody td{
	text-align: center;
}
.tableArea sub{
	bottom:0;
	vertical-align: middle;
}
.tableArea sub a{
	color: #3865e0;
}

.tableArea ul li + li{
	margin-top: 5px;
}

.onlysp{
	display: none;
}

.pct{
	margin: 2em 0;
}

img.icon{
	display: inline-block;
	vertical-align: middle;
}

@media screen and (max-width: 640px){
	.tableArea{
		width: 100%;
	}
	.tableArea table tbody th{
		padding: 5px;
	}
	
	.tableArea ul li{
		padding-left: 22px;
		text-indent: -22px;
	}
	
	#model_table{
		margin-bottom: 1em;
	}
	
	.s5-p2{
		font-size: 1rem;
	}
	
	
}

@media screen and (max-width: 390px){
	.onlysp{
		display: block;
	}
}

@media (max-width: 412px) {
	.h_400 {
		height: 45.3em;
	}
}

/* 2024/11/01 追記 */
/*
.topArea h1 {
    margin-bottom: 0;
}

.topArea img {
    width: 100%;
    height: auto;
    margin-left: 0;
}
*/

ul.list-flex{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
	gap: 2em;
    margin: 2em 0;
    padding-left: 0;    
}

ul.list-flex li{
    width: 250px;
}

ul.list-flex a{
    display: inline-block;
}

#contents a.s5-linkV3 {
    color: #3865e0;
}

#contents a.s5-linkV3:hover,
#contents a.s5-linkV3:focus,
#contents a.s5-linkV3:active {
    color: #34568e;
}

#contents a.s5-linkV3:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D'%233865e0'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20width%3D'32px'%20height%3D'32px'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M25.6%2C16l-16%2C16l-3.2-3.2L19.1%2C16L6.4%2C3.2L9.6%2C0L25.6%2C16z'%2F%3E%3C%2Fsvg%3E");
}

#contents .s5-linkV3.s5-linkV3--down:after {
    display: inline-block;
    content: '';
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D'%233865e0'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20width%3D'32px'%20height%3D'32px'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M16%2C25.6L0%2C9.6l3.2-3.2L16%2C19.1L28.8%2C6.4L32%2C9.6L16%2C25.6z'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-top: -.15em;
    margin: 0 0.5em;
}

@media (max-width: 732px){	
    ul.list-flex li {
		width: 100%;
    	max-width: 250px;
    }
	
	ul.list-flex li img {
    	width: 250px;
    }
} 

@media screen and (max-width: 640px){	
	ul.list-flex {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.5em;
    }
}

/* 20241210*/

@media screen and (max-width: 600px){	
	.onlysp{
		display: block;
	}
}

/*2024/12/17*/
#contents .topArea {
    position: relative;
    display: block;
    background-size: cover;
}

#contents .topArea h1 {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%);
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-weight: bold;
    font-size: clamp(16px, 3.5vw, 39px);
	text-shadow: -2px -2px 0 white,2px -2px 0 white,-2px 2px 0 white,2px 2px 0 white,0px -2px 0 white,-2px 0px 0 white,2px 0px 0 white,0px 2px 0 white;
}

#contents .topArea h1 span.title {
    padding: 0 18px;
    border-bottom: 2px solid #2e2d2d;
}

#contents .topArea h1 span.s_title {
	display: block;
    padding: 18px;
	text-align: right;
}

#contents .topArea img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 430px){	
	#contents .topArea h1 span.title {
		padding: 0;
	}

	#contents .topArea h1 span.s_title {
		padding: 10px 0 0;
	}
}