@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/headphone/images/wireless-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/headphone/images/wireless-study/ring2.png);
    position: absolute;
    top: 0.7em;
    left: -0.85em;
	bottom: calc(9 / 235 * 100%);
}

.ring3 {
    width: 2.3em;
	background: url(/support/headphone/images/wireless-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;
}

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

h3 img{
	height: 3em;
}

h3.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%;
}

h3.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%;
}

h3.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%;
}

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

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

h4.pin_y::before {
  content: url("/support/headphone/images/wireless-study/pin_yellow.png");
  margin-right: 0.8em;
}

h4.pin_b::before {
  content: url("/support/headphone/images/wireless-study/pin_blue.png");
  margin-right: 0.8em;
}

h4.pin_g::before {
  content: url("/support/headphone/images/wireless-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(255,221,90,.4);
	border: #ffdd5a 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;
}

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

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

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

@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;
	}
	
	h3.pencil_y > span{ 
		font-size: 1.3125rem;
	}

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

	h3.pencil_g > span{ 
		font-size: 1.3125rem;
	}
	
	h4 { 
		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: 20.8em;
	}
	
	.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: 20em;
	}
	
	.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: 18.2em;
	}
}

@media (max-width: 388px){
	.h_235 {
		height: 20em;
	}
	
	.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;
	}	
}


/* 2024/03/08 */
@media (max-width: 640px){
	.bnr_single img {
		width: 100%;
		max-width: 300px;
	}	
}

/* 2024/07/23 */
.mb_1rem{margin-bottom: 1rem;}