@charset "UTF-8";

.station-visual{
	display:table;
	background-image: url("/images/owner/owner_publication_page_main.jpg");
	background-size: cover;
	width: 100%;
	height: 400px;
}
.station-visual .center-message{
	display: table-cell;
	vertical-align: middle;
}
.station-visual h2{
	color: #fff;
	text-align: center;
	padding: 0 5%;
}
.station-visual p{
	color: #fff;
	text-align: center;
	font-size: 120%;
	font-weight: 500;
	padding: 0 5%;
	margin-bottom: 50px;
}
.station-visual a{
	color: #fff;
	background: #fcc800;
	padding: 10px 10%;
}
.station-visual a:hover{
	background: #e6b800;
}
.station-trouble{
	margin: 20px 0 30px;
}
.station-trouble h2{
	width: 90%;
	text-align: center;
	font-size: 130%;
	margin: 20px auto;
}
.station-trouble li{
	display: block;
	width: 90%;
	//background: #eee;
	text-align: left;
	font-size: 100%;
	margin: 10px auto 10px;
	padding: 15px 0;
	list-style: none;
	height: 40px;
}
.trouble-checkmark {
    width: 10%;
    float: left;
}
.trouble-content {
    width: 90%;
    font-size: 100%;
    float: left;
}
.checkmark000{
	padding-left:24px;
	position:relative;
}
.checkmark000:before,
.checkmark000:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark000:before{
	width:16px;
	height:16px;
	background:#fcc800;
    border:1px solid #fcc800;
	left:0;top:2px;
}
.checkmark000:after{
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:7px;
}
h2.massage-label{
	clear: both;
	width: 100%;
	background-color: #222;
	color: #fff;
	text-align: center;
	padding: 20px 5%;
	font-weight: 600;
	font-size: 120%;
}
.station-reason li{
	width: 90%;
	text-align: left;
	font-size: 110%;
	margin: 10px auto;
	list-style: none;
	font-weight: 600;
}
.station-reason li.main{
	margin: 10px auto;
	padding: 10px 0 0 0;
}
.station-reason li.sub{
	width: 90%;
	text-align: left;
	font-size: 90%;
	margin: 10px auto 30px;
	list-style: none;
	color: #666;
	font-weight: 400;
}
.station-step li{
	width: 90%;
	text-align: left;
	font-size: 110%;
	margin: 10px auto;
	list-style: none;
	font-weight: 600;
}
.station-step li.main{
	margin: 30px auto 10px;
}
.station-step li.sub{
	width: 90%;
	text-align: left;
	font-size: 90%;
	margin: 10px auto 30px;
	list-style: none;
	color: #666;
	font-weight: 400;
}
.station-step li.image{
	margin: 0 auto 70px;
}
.station-step a.orange{
	display: block;
	color: #fff;
	background: #fcc800;
	padding: 10px 10%;
	width: 80%;
	margin: 50px auto 50px;
	text-align: center;
}
.station-step a.orange:hover{
	background: #e6b800;
}

.station-voice{
	display: flex
}

/* パソコンではタイル型で表示 */
.slide-wrap {
  background-color: #fff;
  display: flex;
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;
}
.slide-box {
  height: auto;
  margin-right: 1%;
  width: 49%;
}
/* サムネイルとタイトルのスタイル調整 */
.slide-box a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}
.slide-box img {
  display: block;
  height: auto;
  width: 100%;
}



.voice-box{
	width: 90%;
	border: 1px solid #ccc;
	margin: 5px 5%;
	background: #eee;
	padding: 0 0 20px 0;
}
.voice-box .img-area{
	display:table;
	background-image: url("/images/owner/eric-nopanen-624212-unsplash@3x.png");
	background-position: bottom;
	background-size: cover;
	width: 100%;
	height: 200px;
}
.voice-box .voice-space1{
	background-image: url("/images/owner/voice_12221.jpg");
}
.voice-box .voice-space2{
	background-image: url("/images/owner/voice_11138.jpg");
}
.voice-box .voice-space3{
	background-image: url("/images/owner/voice_14324.jpg");
}
.voice-box .voice-owner-img{
	background-image: url("/images/owner/benjamin-child-90768-unsplash@3x.png");
	background-position: bottom;
	background-size: cover;
	border-radius: 200px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
}
.voice-box .voice_owner1{
	background-image: url("/images/owner/logo-owner1.JPG");
}
.voice-box .voice_owner2{
	background-image: url("/images/owner/logo-owner2.JPG");
}
.voice-box .voice_owner3{

}
.voice-content {
    height: 50px;
    width: 18%;
    float: left;
    margin: 5px 1%;
}
.voice-title-box {
    width: 80%;
    margin: 5px 0;
    vertical-align: middle;
    line-height: 30px;
    padding: 10px 0;
    font-weight: 800;
    font-size: 100%;
}
.voice-content-box{
	clear: both;
	height: auto;
	width: 94%
	margin: 10px 0;
	padding: 10px 3% 0;
}
.voice-space-name{
	font-size: 140%;
	font-weight: 800;
	margin: 20px 0 5px;
}
.voice-box .message{
	display:table;
	float: left;
	widht: 100px;
	background: red;
	clear: both;
}

/*全体*/
.hidden_box {
    margin: 0;/*前後の余白*/
    padding: 0;
    width: 100%;
}
/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    //border-top: solid 1px #4abfe6;
    border-bottom: solid 1px #4abfe6;
    cursor :pointer;
    color: #4abfe6;
    border-collapse: collapse;
    background: -moz-linear-gradient(top, #f0f8ff, #FFF);
  background: -webkit-linear-gradient(top, #f0f8ff, #FFF);
  background: linear-gradient(to bottom, #f0f8ff, #FFF);
}
/*ボタンホバー時*/
.hidden_box label:hover {
	background: -moz-linear-gradient(top, #cce6ff, #FFF);
	background: -webkit-linear-gradient(top, #cce6ff, #FFF);
	background: linear-gradient(to bottom, #cce6ff, #FFF);
}
/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0 5%;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 5%;
    height: auto;
    opacity: 1;
    
}



.station-download a{
	display: block;
	color: #fff;
	background: #5c5c5c;
	padding: 10px 10%;
	width: 80%;
	margin: 10px auto;
	text-align: center;
}
.station-download a:hover{
	background: #aaa;
	color: #000;
}
.station-download a.aqua{
	background: #4abfe6;
	margin: 0 auto;
}
.station-download a.aqua:hover{
	background: #41a9cc;
	color: #fff;
}
.station-download a.orange{
	background: #fcc800;
	margin: 30px auto 10px;
}
.station-download a.orange:hover{
	background: #e6b800;
	color: #fff;
}

.station-download p.message{
	width: 80%;
	margin: 30px auto 10px;
	text-align: center;
}
.station-download div{
	margin: 60px 0;
}

/*ウィンドウ幅が最大479pxまでの場合に適用*/
@media screen and (max-width: 479px) {

	/* スマホではスライダーで表示 */
	.slide-wrap {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}
	.slide-box {
		flex: 0 0 90%;
	}
}

/*ウィンドウ幅が最大767pxまでの場合に適用*/
@media screen and (max-width: 767px) { 

	
}

/*ウィンドウ幅が767px以上の場合に適用*/
@media screen and (min-width: 767px) {

	.station-trouble{
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}
	.station-trouble li{
		width: 60%;
	}
	.station-reason li{
		width: 60%;
	}
	.station-reason li.sub{
		width: 60%;
	}
	.station-step li{
		width: 60%;
	}
	.station-step li.sub{
		width: 60%;
	}
	.station-step a.orange{
		width: 60%;
	}
	.voice-title-box {
	    font-size: 80%;
	}
	.station-download a{
		width: 60%;
	}
}

/*ウィンドウ幅が1024px以上の場合に適用*/
@media screen and (min-width: 1024px) {
	.station-trouble li{
		width: 50%;
	}
	h2.massage-label{
		font-size: 150%;
	}
	.station-reason li{
		width: 50%;
	}
	.station-reason li.sub{
		width: 50%;
	}
	.station-step li{
		width: 50%;
	}
	.station-step li.sub{
		width: 50%;
	}
	.station-step a.orange{
		width: 50%;
		font-size: 120%;
	}
	.voice-title-box {
	    font-size: 100%;
	}
	.station-faq{
		width: 80%;
		margin: 0 auto;
		font-size: 120%;
	}
	.hidden_box label{
		width: 100%;
	}
	.station-download a{
		width: 50%;
		font-size: 120%;
	}
}

/*ウィンドウ幅が1440px以上の場合に適用*/
@media screen and (min-width: 1440px) {

	.station-trouble{
		font-size: 120%;
	}
	.station-trouble li{
		width: 40%;
	}
	.station-reason li{
		width: 40%;
	}
	.station-reason li.sub{
		width: 40%;
	}
	.station-step li{
		width: 40%;
	}
	.station-step li.sub{
		width: 40%;
	}
	.station-step a.orange{
		width: 40%;
	}
	.station-download a{
		width: 40%;
	}
}