@charset "UTF-8";
/* CSS Document */
.order_kv{
	width: 100%;
	height: 40vh;
  	background-image: url("../images/order_plan/main_sp.jpg");
	background-size: cover;
    background-position: bottom;
}
.att{
	font-size: 70%;
	text-align: left;
}
.model-navi{
	margin:20px auto 0;
	width:100%;
}
.model-navi ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    padding: 0;
    margin: 0;
}
.model-navi ul li{
	width:98%;
	margin:1%;
}
.model-navi ul li a{
	font-size:12px;
	text-align:center;
	text-decoration:none;
	color:#FFF;
	display:block;
	padding:16px 0px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:contain;
	background-size:87% auto;
    border: solid 1px #fff;

}
.model-navi ul li a.active,.model-navi ul li a:hover{
	background-color:rgba(18,36,38,1.00);
	color:#FFF;
    opacity: 1;
}
/*pc*/
@media screen and (min-width: 758px){
.order_kv{
	width: 100%;
	height: 40vh;
  	background-image: url("../images/order_plan/main.jpg");
	background-size: cover;
    background-position: bottom;
}
.model-navi{
	margin:80px auto 20px auto;
}
.model-navi ul{
	display: flex;
	justify-content: center;
}
.model-navi ul li{
	width:28%;
	margin:0% 20px;
}
.model-navi ul li a{
	font-size:14px;
	font-weight: bold;
	background-size:92% auto;
	width:92%;
}
}




/*１--------------------------------------*/
.content1{
    margin: 0 auto;
    background-color: #8a6e7e;
}
.content1 h2 span{
    max-width: 60%;
    margin: 20px auto;
    font-size: 60px;
    color: #DFCED8;
}
.content1 h2 img{
    max-width: 60%;
    margin: 20px auto;
}
.content1 h3{
	width: 100%;
	margin: 0 auto;
}
.content1 .od-system{
    width: 100%;
    padding: 40px 0;
    background-color: #8a6e7e;
}
.content1 .od-system h4 img{
	max-width: 100%;
	margin: 20px auto;
}

.block1{
	margin:35px auto ;
}
.block1 .fbox{
	margin:15px 0;
}
.block1 .fbox-r{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.block1 .fbox-r dl{
	width:48%;
	margin:10px 0;
}
.block1 .fbox-r dl dd{
	font-size:12px;
	line-height:1.3em;
	margin:5px 0;
	text-align: left;
}
.content1 img{
	display:block;
	width:100%;
	height:auto;
}
/*pc*/
@media screen and (min-width: 758px){
.content1{
}
.content1 h2 span{
    max-width: 60%;
    font-size: 80px;
}
.content1 h2 img{
    max-width: 378px;
    margin: 20px auto;
}
.content1 h3{
	width: 50%;
}
.content1 .od-system{
    width: 100%;
    padding: 80px 0;
}
.content1 .od-system h4 img{
	max-width: 980px;
	margin: 20px auto 60px;
}
.block1{
	margin:65px auto 60px auto;
}
.block1 .fbox{
	margin:auto;
	width:50%;
	float: left;
}
.block1 .fbox-r{
	width:48%;
	margin:0 auto;
	float: right;
}
.block1 .fbox-r dl{
	width:45%;
	margin:10px 5px;
}
.block1 .fbox-r dl dd{
	font-size:14px;
	line-height:1.3em;
	margin:20px 0;
}
}




/*order_plan2.php--------------------------------------------------------------------------------------*/

/*block3-------------------------------------*/

.content2{
    margin: 0 auto;
    background-color: #595757;
}
.content2 h2 span{
    max-width: 60%;
    margin: 20px auto;
    font-size: 60px;
    color: #DFCED8;
}
.content2 h2 img{
    max-width: 60%;
    margin: 20px auto;
}
.content2 h3{
	width: 100%;
	margin: 0 auto;
}
.content2 .block2{
}
.block2 .select{
	padding: 15px;
	margin:20px auto;
}
.block2 .select .sel-box{
	margin-bottom:20px;
}
.block2 .select .sel-box p img{
	width:100%;
}
.block2 .select .sel-box dl{
	position:relative;
	margin-bottom:20px;
	
}
.block2 .select .sel-box dl dt{
	position:relative;
	font-size: 13px;
	line-height: 1em;
	font-weight: bold;
	color: #FFF;
	border: 1px solid #FFF;
	padding: 11px 10px;
	letter-spacing:0px;
	text-align: left;
}
.block2 .select .sel-box dl dt span{
	font-size: 8px;
	font-weight: normal;
	margin-left:5px;
}
.block2 .select .sel-box dl dt type{
	position:absolute;
	font-size: 12px;
	line-height: 1em;
	font-weight: bold;
	letter-spacing:0px;
	right: 1%;
	padding: 4px 0 2 0;
}
.block2 .select .sel-box dl dt type::before{
    content: "";
    border-left: solid 1px #FFF;
    padding-right: 10px;
}
.block2 .select .sel-box dl dd{
	margin:10px auto;
	width:auto;
}

.block2 .select .sel-box-r{
}
.block2 .select .sel-box-r .owner_title{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-style: normal;
    text-align: left;
	color: #FFF;
    font-size: 120%;
    padding-bottom: 10px;
}
.block2 .select .sel-box-r .owner_title:before {
content:"□";
font-weight: lighter;
}
.block2 .select .sel-box-r dl{
	position:relative;
	margin-bottom:20px;
	
}
.block2 .select .sel-box-r img{
	width:100%;
}
.block2 .select .sel-box-r dl dt{
	position:relative;
	font-size: 11px;
	line-height: 1em;
	font-weight: bold;
	color: #FFF;
	border: 1px solid #FFF;
	padding: 11px 10px;
	letter-spacing:0px;
	text-align: left;
}
.block2 .select .sel-box-r dl dt span{
	font-size: 8px;
	font-weight: normal;
	margin-left:5px;
}
.block2 .select .sel-box-r dl dt type{
	position:absolute;
	font-size: 11px;
	line-height: 1em;
	font-weight: bold;
	letter-spacing:0px;
	right: 1%;
	padding: 4px 0 2 0;
}
.block2 .select .sel-box-r dl dt type::before{
    content: "";
    border-left: solid 1px #FFF;
    padding-right: 10px;
}
.block2 .select .sel-box-r dl dd{
	margin:10px auto;
	width:auto;
}
.block2 .select .sel-box .owner_title_sp{
    text-align: left;
	color: #FFF;
    font-size: 120%;
    padding-bottom: 10px;
}
.block2 .select .sel-box .owner_title_sp:before {
content:"□";
font-weight: lighter;
}

.block2 .select .sel-box dl dd img{
	margin:18px auto;
	width:100%;
}



@media screen and (min-width: 758px){
.content2{
    margin: 0 auto;
}
.content2 h2 span{
    max-width: 60%;
    font-size: 80px;
}
.content2 h2 img{
    max-width: 378px;
    margin: 20px auto;
}
.content2 h3{
	width: 50%;
}
.content2 .block2 .select{
	padding: 30px;
	margin:40px auto;
	display:flex;
	justify-content: space-between;
	align-items: top;
}
.block2 .select .sel-box{
	width:45%;
}
.block2 .select .sel-box{
	width:45%;
	padding-right:2%;
}
.block2 .select .sel-box p img{
	width:100%;
}
.block2 .select .sel-box dl{
	margin-bottom:30px;
}
.block2 .select .sel-box dl:last-child{
	margin-bottom:0px;
}
.block2 .select .sel-box dl dt{
	font-size: 15px;
	line-height: 1em;
	padding: 11px 30px;
}
.block2 .select .sel-box dl dt span{
	font-size: 11px;
	font-weight: normal;
}
.block2 .select .sel-box dl dt type{
	font-size: 15px;
	font-weight: bold;
	padding: 2px;
}
.block2 .select .sel-box dl dt type::before{
    padding-right: 30px;
}
.block2 .select .sel-box dl dd img{
	margin:18px auto;
	width:85%;
}
    
    
.block2 .select .sel-box-r{
	width:50%;
	padding-right:2%;
}
.block2 .select .sel-box-r img{
	width:100%;
}
.block2 .select .sel-box-r dl{
	margin-bottom:30px;
}
.block2 .select .sel-box-r dl:last-child{
	margin-bottom:0px;
}
.block2 .select .sel-box-r dl dt{
	font-size: 15px;
	line-height: 1em;
	padding: 11px 30px;
}
.block2 .select .sel-box-r dl dt span{
	font-size: 11px;
	font-weight: normal;
}
.block2 .select .sel-box-r dl dt type{
	font-size: 15px;
	font-weight: bold;
	padding: 2px;
}
.block2 .select .sel-box-r dl dt type::before{
    padding-right: 30px;
}
.block2 .select .sel-box-r dl dd{
	margin:18px auto;
	width:85%;
}
.block2 .select .sel-box .owner_title{
}
.block2 .select .sel-box .owner_title:before {
}
}


/*==================================================
ギャラリー
===================================*/
.content1 .gallery_order{
	display: block;
	margin: 80px auto 0px;
	columns:2;/*段組みの数*/
    background: linear-gradient(
  180deg,
  transparent 30%,
  transparent 0%,
  #FFFFFF 10%,
  #03003f 100%
);
	padding:20px;/*ギャラリー左右に余白をつける*/
}
.content1 .gallery_order li {
    margin: 20px;/*各画像下に余白をつける*/
}

/*ギャラリー内のイメージは横幅100%にする*/
.content1 .gallery_order img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}
@media screen and (max-width: 768px){
.content1 .gallery_order{
	margin: 40px auto 0;
	background-position: bottom left;
	background-repeat: no-repeat;
	padding:5px;/*ギャラリー左右に余白をつける*/
}
.content1 .gallery_order li {
    margin: 5px;/*各画像下に余白をつける*/
}
}