/* ===================================================================
CSS
 file name  :  second-op.css
=================================================================== */
@media screen and (min-width: 641px) {
/* PC用のスタイル記述 */
    h2.page_title {
        height: auto;
        padding: 30px 0 30px 0;
        line-height:1.5;
        box-sizing: initial;
    }
	p.lead{
		font-size: 18px;
		text-align: center;
	}
	p.lead img{
		margin:10px;
	}
	p.lead2{
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		color: #00306C;
		margin-top: 50px;
	}
	p.lead3{
		margin-top: 20px;
		text-align: center;
	}
	ul.gimon{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
	}
	ul.gimon li{
		width: 230px;
		height: 60px;
		box-sizing: border-box;
		background: #EAF2FF url(../images/preview/pre_koe.png) no-repeat;
		background-size: 90px auto;
		background-position: -27px -22px;
		padding: 5px 0;
		margin: 20px 8px auto 8px;
		line-height: 140%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.point{
		background: #F6F6F8;
		padding: 30px 40px;
		margin-top: 30px
	}
	.point .main_text{
		color: #00306C;
		font-size: 20px;
	}
	.point .main_text strong{
		font-size: 24px;
	}
	.point strong.emphasize{
		font-size: 22px;
		color: #00306C;
	}
	.image_sell{
		margin-top: 40px;
	}
	.second_op_btn .btn{
		margin:50px auto auto auto;
		font-size:24px;
		background:#00306D;
		padding:20px 0;
	}

#flow {
    margin-top: 20px;
    border: 1px solid #CCCCCC;
	text-align: center;
}
#flow li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}
#flow li a:hover{
	background:#DFE6EE;
}	
	

/* =====================================
オンライン内見の流れ
======================================== */
.ls01_text {
    color: #00306D;
    text-align: center;
    padding: 15px;
    border: 1px solid #00306D;
//    background: #E8F3FF;
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 8px;
}
.ls01_text img {
	padding-top: 30px;
	padding-bottom: 10px;
}

#fp_ex li {
    margin-top: 20px;
    border: 1px solid #BBBBBB;
    background: #F6F6F8;
    padding: 10px 20px;
}
#fp_ex li .icon {
	width: 15%;
	padding: 20px;
	float: left;
}
#fp_ex li .icon img {
	width: 90%;
	margin: auto;
}
#fp_ex li .flow {
	width: 75%;
	padding: 20px;
	float: right;
}

#fp_ex li a {
    display: block;
    color: #00A3D8;
    text-decoration: none;
}
.sub {
    margin: 15px 0;
    font-weight: bold;
    color: #00306D;
}

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: auto;
}
.cp_box label {
	position: relative;
	display: block;
	width: 20%;
	margin-top: 10px;
	margin-bottom: 20px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	color: #00306d;
	border: 1px dotted #00306d;
	border-radius: 15px;
}
.cp_box label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #00306d;
}
.cp_box label::after {
	font-family: 'FontAwesome';
	content: ' \f067';
	color: #00306d;
}
.cp_box label:hover::after {
	color: #ffffff;
}
.cp_box input:checked ~ label::after {
	font-family: 'FontAwesome';
	content: ' \f068';
	color: #00306d;
}
.cp_box input:checked ~ label:hover::after {
	color: #ffffff;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.cp_box input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
.cp_box .cp_container table img{
	width: 230px;
	margin: 20px auto;
}

/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box input:checked ~ div.cp_container {
	height: 100%;
	max-height: none;
}
}
@media screen and (max-width: 640px) {
/* スマートフォン用のスタイル記述 */
/* =====================================
オンライン内見
======================================== */
	p.lead{
		text-align: center;
	}
	p.lead img{
		margin:10px 0;
	}
	p.lead2{
		text-align: left;
		font-weight: bold;
		color: #00306C;
		margin: 20px 20px auto 20px;
	}
	p.lead3{
		margin: 20px 20px auto 20px;
	}
	ul.gimon{
		margin: 10px 20px auto 20px;
	}
	ul.gimon li{
		box-sizing: border-box;
		background: #EAF2FF url(../images/preview/pre_koe.png) no-repeat;
		background-size: contain;
		padding: 10px 10px 10px 30px;
		margin-top: 10px;
		line-height: 140%;
	}
	.point{
		background: #F6F6F8;
		padding: 10px;
		margin: 10px 20px auto 20px;
	}
	.point .main_text{
		color: #00306C;
		font-size: 120%;
	}
	.point .main_text strong{
		font-size: 120%;
	}
	.point strong.emphasize{
		font-size: 120%;
		color: #00306C;
	}
	.image_sell{
		margin: 20px 20px auto 20px;
	}
	.second_op_btn .btn{
		margin: 20px 20px auto 20px;
		font-size:120%;
		background:#00306D;
		padding:10px 0;
	}

#flow {
	width: 90%;
    border: 1px solid #CCCCCC;
	text-align: center;
	margin: auto;
}
#flow li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}





/* =====================================
オンライン内見の流れ
======================================== */
.ls01_text {
	width: 90%;
    color: #00306D;
    text-align: center;
    padding: 15px;
	margin:20px auto;
    border: 1px solid #00306D;
//    background: #E8F3FF;
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 8px;
}
.ls01_text img {
	padding-top: 30px;
	padding-bottom: 10px;
}

#fp_ex li {
//	width: 90%;
//    margin-top: 20px;
    border: 1px solid #BBBBBB;
    background: #F6F6F8;
    padding: 10px 20px;
}
#fp_ex li .icon {
	width: 20%;
//	padding: 20px;
	float: left;
}
#fp_ex li .icon img {
	width: 100%;
	margin: auto;
}
#fp_ex li .flow {
	width: 75%;
//	padding: 10px;
	float: right;
}

#fp_ex li a {
    display: block;
    color: #00A3D8;
    text-decoration: none;
}
.sub {
    margin: 15px 0;
    font-weight: bold;
    color: #00306D;
}

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: auto;
}
.cp_box label {
	position: relative;
	display: block;
	width: 50%;
	margin-top: 10px;
	margin-bottom: 20px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
	color: #00306d;
	border: 1px dotted #00306d;
	border-radius: 15px;
}
.cp_box label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #00306d;
}
.cp_box label::after {
	font-family: 'FontAwesome';
	content: ' \f067';
	color: #00306d;
}
.cp_box label:hover::after {
	color: #ffffff;
}
.cp_box input:checked ~ label::after {
	font-family: 'FontAwesome';
	content: ' \f068';
	color: #00306d;
}
.cp_box input:checked ~ label:hover::after {
	color: #ffffff;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.cp_box input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
.cp_box .cp_container img {
	margin: 20px auto
}

/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box input:checked ~ div.cp_container {
	height: 100%;
	max-height: none;
}
}