<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* CSS Document */


/*顧客訪問ページ
---------------------------------------------------------------------------*/
/*ギャラリー全体のコンテナー*/
.tage {
	position: relative;
	max-width: 800px;
	margin: 20px auto;
}
/*全サムネイルのコンテナー*/
.thumbs {
	margin-right:2%;
	margin-top: 10px;
}
/*サムネイルの幅、ポインターを手のひら*/
.thumbs label img {
	width:18.5%;
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
.r1, .r2, .r3, .r4, .r5 {
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
.r1:checked ~ .photo1 img, .r2:checked ~ .photo2 img, .r3:checked ~ .photo3 img, .r4:checked ~ .photo4 img, .r5:checked ~ .photo5 img {
	opacity: 1;
}

/*機械名羅列*/
.custmerli li {
	list-style: none;
	padding: 6px 5px 6px 50px;

}
.custmerli li:nth-child(odd){
background:#EFEFEF;
}

.ml40 {
	margin-left: 40px;
}

/*Comment*/


/*お客様の声テーブル*/
.custabl {
}
.custabl table{
	border: none;
}

.custable th {
	width: 15%;
	background: none;
	border: none;
	padding: 0;
}

.custable td {
	width: 70%;
	position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #c2272d;
}


/*ふきだし部分　不具合
.custable td :before{
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
 	z-index: 2;
}


.custable td :after{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #c2272d;
 	z-index: 1;
}*/

.box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 2px 9px 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #C2272d;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.custable td p {
    margin: 0; 
    padding: 0;
}

.bdTtl {
display: flex;
align-items: center;
justify-content: center;  /*全幅で線を引く場合は不要。*/
}
.bdTtl:before,
.bdTtl:after {
border-top: 1px solid;
content: "";
flex-grow: 1; /*全幅で線を引く場合。widthで線幅を短くしたい場合は不要もしくは0（初期値が0だから）*/
width:5em; /*全幅で線を引く場合は不要。*/
}
.bdTtl:before {
margin-right: 1rem;
}
.bdTtl:after {
margin-left: 1rem;
}




/*ギャラリー全体のコンテナー*/
.stage {
	position: relative;
	max-width: 800px;
	margin: 20px auto;
}
/*全サムネイルのコンテナー*/
.thumbs {
	margin-right:2%;
	margin-top: 10px;
}
/*サムネイルの幅、ポインターを手のひら*/
.thumbs label img {
	width:18.5%;
	cursor: pointer;
}
/*G社ラジオボタンを非表示に*/
#r1g, #r2g, #r3g, #r4g {
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*G社チェックされたサムネイルに相当する写真だけを表示*/
#r1g:checked ~ #photo1g img, #r2g:checked ~ #photo2g img, #r3g:checked ~ #photo3g img, #r4g:checked ~ #photo4g img {
	opacity: 1;
}


/*H社---------------------------------------------------------------------------*/
#r1h, #r2h, #r3h , #r4h {
	display: none;
}
#r1h:checked ~ #photo1h img, #r2h:checked ~ #photo2h img, #r3h:checked ~ #photo3h img, #r4h:checked ~ #photo4h img {
	opacity: 1;
}


/*I社---------------------------------------------------------------------------*/
#r1i, #r2i, #r3i {
	display: none;
}
#r1i:checked ~ #photo1i img, #r2i:checked ~ #photo2i img, #r3i:checked ~ #photo3i img {
	opacity: 1;
}


/*J社---------------------------------------------------------------------------*/
#r1j, #r2j, #r3j,#r4j{
	display: none;
}
#r1j:checked ~ #photo1j img, #r2j:checked ~ #photo2j img, #r3j:checked ~ #photo3j img, #r4j:checked ~ #photo4j img {
	opacity: 1;
}


/*K社---------------------------------------------------------------------------*/
#r1k, #r2k, #r3k {
	display: none;
}
#r1k:checked ~ #photo1k img, #r2k:checked ~ #photo2k img , #r3k:checked ~ #photo3k img {
	opacity: 1;
}


/*L社---------------------------------------------------------------------------*/
#r1l, #r2l {
	display: none;
}
#r1l:checked ~ #photo1l img, #r2l:checked ~ #photo2l img {
	opacity: 1;
}

/*B社---------------------------------------------------------------------------*/
#r1b, #r2b, #r3b,#r4b,#r5b{
	display: none;
}
#r1b:checked ~ #photo1b img, #r2b:checked ~ #photo2b img, #r3b:checked ~ #photo3b img, #r4b:checked ~ #photo4b img , #r5b:checked ~ #photo5b img {
	opacity: 1;
}


/*機械名リスト--*/
.mechalist {
	position: absolute;
	left: 180px;
}



/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
	
/*お客様の声テーブル*/
.custable td {
    width: 90%;
    margin: 0;
}	
	
}


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
	
/*顧客j訪問お客様の声タイトルよこぼう設定*/
.bdTtl:before,
.bdTtl:after {
width:2em; /*全幅で線を引く場合は不要。*/
}
.bdTtl:before {
margin-right: 10px;
}
.bdTtl:after {
margin-left: 10px;
}
	
	
/*機械名羅列*/
.custmerli li {
	padding: 6px 5px 6px 20px;

}	
/*機械名リスト--*/
.mechalist {
	left: 130px;
}
	
}


/*画面幅520px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:520px){

/*顧客訪問機械羅列*/	
.custmerli li {
    list-style: none;
    padding: 6px 5px 6px 20px;
}	
/*機械名リスト--*/
.mechalist {
	left: 120px;
}
}


/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

/*顧客j訪問お客様の声タイトルよこぼう設定*/
.bdTtl:before,
.bdTtl:after {
width:1em; /*全幅で線を引く場合は不要。*/
}
.bdTtl:before {
margin-right: 5px;
}
.bdTtl:after {
margin-left: 5px;
}	
	
.box-title {
    font-size: 15px;
}
/*顧客訪問機械羅列*/	
.custmerli li {
    list-style: none;
    padding: 6px 5px 6px 10px;
}	
/*機械名リスト--*/
.mechalist {
	left: 90px;
}
}


</pre></body></html>