/* ===================================================================
CSS
 file name  :  second-op.css
=================================================================== */
@media screen and (min-width: 769px) {
/* PC用のスタイル記述 */
    .c-content-page {
        padding-top: 50px;
        padding-bottom: 100px;
        line-height:1.8;
    }
    .c-inner.-primary {
        max-width: 1000px;
    }
	p.lead img{
		margin-bottom:20px;
	}
	p.lead{
		font-size: 18px;
		text-align: center;
		margin-bottom:50px;
	}
	p.lead2{
		font-size: 18px;
		text-align: center;
		font-weight: bold;
		color: #00306C;
		margin-top: 50px;
	}
	p.lead3{
		margin-top: 20px;
		text-align: center;
	}
	p.lead4{
		color: #00306C;
		font-size: 28px;
		text-align: center;
		margin-bottom:20px
	}
	p.lead5{
		color: #000000;
		margin-bottom:50px;
	}
	.lead_img img
	{
	    width:495px;
	    float:left;
	    display:block;
		margin-bottom:50px;
	}
	.lead_img img:first-child
	{
	    margin-right:10px;
	}
	.lead_img2
	{
	    text-align:left;
		margin-bottom:50px;
	    width: 760px;
        margin-left: auto;
        margin-right: auto;
	}
	.lead_img2 .img
	{
	    float:left;
	    width:300px;
	    margin-right:85px;
	}
	.lead_img2 .text
	{
	    float:left;
	    width:375px;
	}
	.lead_img3
	{
	    text-align:left;
		margin-bottom:50px;
	    width: 760px;
        margin-left: auto;
        margin-right: auto;
	}
	.lead_img3 .img
	{
	    float:right;
	    width:300px;
	}
	.lead_img3 .text
	{
	    float:right;
	    width:375px;
	    margin-right:85px;
	}
	.lead_img4
	{
	    text-align:center;
		margin-bottom:50px;
	}
	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: 18px;
		text-align: center;
	}
	.point .main_text strong{
		font-size: 22px;
		font-weight:bold;
	}
	.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;
	}
	.merit 
	{
	    margin-bottom:50px;
	}
	.merit li
	{
	    float:left;
	    width:25%;
	    text-align:center;
	}
	.merit li img
	{
	}
/* =====================================
オンライン内見の流れ
======================================== */
    .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: 20%;
        padding: 20px;
        float: left;
    }
    #fp_ex li .icon img {
        width: 90%;
        margin: auto;
    }
    #fp_ex li .flow {
        width: 80%;
        padding: 20px;
        float: right;
    }
    #fp_ex li .flow table td {
        background-color: rgba(255, 255, 255, 0.5);
        padding:0;
        text-align:center;
    }

    #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;
        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 .cp_container .zoom_flow{
        font-weight:bold;
    }
    .cp_box .cp_container .zoom_flow a{
        color: #00306d;
    }
    

    /* 続きを読むを押すと表示されるテキストの高さ */
    #fp_ex .cp_box input:checked ~ div.cp_container {
        height: 100%;
        max-height: none;
        padding: 10px;
    }
    
    .online_form_btn a{
        margin: 50px auto auto auto;
        font-size: 24px;
        background: #00306D;
        padding: 20px 0;
        border-radius: 3px;
        color: #FFFFFF;
        display: block;
        text-decoration: none;
        text-align: center;
        position: relative;
        box-shadow: 0 1px 1px 0 #888;
    }
    .online_form_btn a:hover {
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
    }
}
@media screen and (max-width: 768px) {
/* スマートフォン用のスタイル記述 */
    .c-content-page {
        line-height:1.8;
        padding-top: 30px;
    }
	p.lead{
		text-align: center;
		margin-bottom:20px;
	}
	p.lead2{
		text-align: left;
		font-weight: bold;
		color: #00306C;
		margin: 20px 0 auto 0;
	}
	p.lead3{
		margin: 20px 0 auto 0;
	}
	p.lead4{
		color: #00306C;
		text-align: center;
		margin-bottom:20px
	}
	p.lead5{
		color: #000000;
		margin-bottom:50px;
	}
	.lead_img img
	{
	    width:100%;
	    display:block;
		margin-bottom:20px;
	}
	.lead_img2
	{
	    text-align:left;
		margin-bottom:50px;
	}
	.lead_img2 .img
	{
	    float:left;
	    width:40%;
	    margin-right:5%;
	}
	.lead_img2 .text
	{
	    float:left;
	    width:55%;
	}
	.lead_img3
	{
	    text-align:left;
		margin-bottom:50px;
	}
	.lead_img3 .img
	{
	    float:right;
	    width:40%;
	}
	.lead_img3 .text
	{
	    float:right;
	    width:55%;
	    margin-right:5%;
	}
	.lead_img4
	{
	    text-align:center;
		margin-bottom:50px;
	}
	ul.gimon{
		margin: 10px 0 auto 0;
	}
	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 0 auto 0;
	}
	.point .main_text{
		color: #00306C;
		word-break: break-all;
		text-align: center;
	}
	.point .main_text strong{
		font-size: 120%;
		font-weight:bold;
	}
	.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;
	}
	.merit 
	{
	    margin-bottom:50px;
	}
	.merit li
	{
	    float:left;
	    width:49.5%;
	    text-align:center;
	    margin-right:1%;
	    margin-bottom:1%;
	}
	.merit li:nth-child(even)
	{
	    margin-right:0;
	}
	.merit li img
	{
	}
    /* =====================================
    オンライン内見の流れ
    ======================================== */
    .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;
        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);
        word-break:break-all;
    }
    .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 .cp_container .zoom_flow{
        font-weight:bold;
    }
    #fp_ex .cp_box .cp_container .zoom_flow a{
        color: #00306d;
    }

    /* 続きを読むを押すと表示されるテキストの高さ */
    .cp_box input:checked ~ div.cp_container {
        height: 100%;
        max-height: none;
        padding: 10px;
    }
    .online_form_btn a{
        margin: 20px auto auto;
        font-size: 120%;
        background: #00306D;
        padding: 10px 0;
        border-radius: 2px;
        color: #FFFFFF;
        display: block;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 1px 1px #888;
    }
}