@charset "UTF-8";
/*
	IMS ASAHI MOUNTAIN PARK
	INDEX CSS
	
	MarkUp -> Pati:)
	
	LAST UPDATE
	
	- 2012.04.04 製作開始 (Pati)
	
--------------------------------------------------------------*/

/* INDEX
--------------------------------------------------------------*/
/* main-images
--------------------------------------------------------------*/
div.main-img{
	background:#edf3de url(../../common/css/images/main_line.gif) repeat-x left bottom;
	height:100px;
	padding:0 0 5px;
	text-align:left;
	width:100%;
}

div.main-img h2{
	background:url(images/page_title.jpg) no-repeat center top;
	text-align:center;
	width:100%;
}

div.bg{
	background:url(images/bg.gif) no-repeat center 2em;
	width:100%;
}

.about_box{
	clear:both;
	margin:0 0 40px 15px;
}


p.txt{
	margin:0 0 30px 15px;
}

div.left_box{
	float:left;
	margin:0 0 60px;
}

div.content h3{
	margin:0 0 30px;
}

div.left_box h4{
	margin:0 0 15px;
}

div.left_box p{
	margin:0 0 15px 40px;
}

div.left_box dl.root{
	margin:0 0 30px 40px;
}

div.left_box dl.root dd{
	margin:0 0 20px;
	padding:0 0 0 20px;
}

div.left_box dl.buss{
	margin:0 0 0 19px;
}


div.right_box{
	float:right;
	margin:0 0 60px;
}

div.box1 dl{
	float:left;
	width:444px;
	margin:0 26px 30px 20px;
}

* html div.box1 dl{
	margin:0 26px 30px 10px;
}

div.box2 {
	clear:both;
	border-bottom:1px dotted #aca292;
	margin:0 0 25px;
	padding:0 0 30px;
}

div.box2 dl{
	float:left;
	width:285px;
	margin:0 21px 0 20px;
}


div.box2 dl.last{
	float:left;
	width:285px;
	margin:0 0 0 20px;
}


.box{
	background:url(images/box_bottom.gif) no-repeat left bottom;
	width:942px;
}

.box h4{
	background:url(images/box_top.gif) no-repeat left top;
	padding:40px 0 20px;
	text-align:center;
	width:942px;
}

.box dl{
	float:left;
}

.box dl.condition1{
	margin:0 0 30px 30px;
	padding: 0 0 0 15px;
	width:185px;
}

.box dl.condition1 dt{
	margin:0 0 15px;
}

.box dl.condition2{
	width:250px;
	margin:0 0 30px;
}

.box dl.condition2 dt{
	margin:0 0 15px 20px;
	padding:0 0 0 20px;
}

.box dl.condition2 dd{
	background:url(images/line.gif) repeat-y left top;
	margin:0 0 30px 20px;
	padding:0 0 0 20px;
}

.box dl.condition3{
	width:420px;
}

.box dl.condition3 dt{
	margin:0 0 15px 20px;
	padding:0 0 0 20px;
}

.box dl.condition3 dd{
	background:url(images/line.gif) repeat-y left top;
	margin:0 0 30px 20px;
	padding:0 0 0 20px;
}



/*121026　立地・周辺案内*/

.flex_location_about{
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
}

.flex_location_about div{
    width: 48%;
}

.flex_location_about div >img{
    width: 265px;
}

.flex_location{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
      justify-content: center;
}

.flex_location > div{
    width: 48%;
    margin: 5px;
}

.flex_location > div:nth-child(3),
.flex_location > div:nth-child(4),
.flex_location > div:nth-child(5)
{
    width: 30%;
}

.root2{
	display: flex;
	width: 100%;
    flex-wrap: wrap;
}

.root2 dl{
	width: 32%;
}

.root2 dl:first-child{
	width: 35%;
}

.root2 dl dt{
	margin:0 0 5px;
}

.root2 dl dt >img{
	max-width: 100%;
}


.root2 dl dd{
	margin:0 0 20px;
}




/*CLEAR FIX 
--------------------------------- */


div.box2:after,
.root2:after,
.box:after {
	content: "";
	display: block;
	clear: both;
	overflow: hidden;
}

/*\*/
* html div.box2,
* html .root2,
* html .box{
	height: 1em;
	overflow: visible;
}


/**/


@media screen and (max-width:767px) {



/*121026　立地・周辺案内*/
    

div.bg{
	background:url(images/bg.gif) no-repeat center 2em;
	width:100%;
}
    
    .location_copy{
        padding: 10px;
    }

.flex_location_about{
    display: block
}

.flex_location_about div{
    width: 98%;
 margin: auto;
}

.flex_location_about div >img{
    width: 100%;
}

.flex_location{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.flex_location > div{
    width: 98%;
    margin: 5px;
}
    
    .flex_location > div >img{
    width: 100%;
}

.flex_location > div:nth-child(3),
.flex_location > div:nth-child(4),
.flex_location > div:nth-child(5)
{
    width: 97%;
}
    
.flex_location > div:nth-child(3) img,
.flex_location > div:nth-child(4)  img,
.flex_location > div:nth-child(5) img
{
    width: 98%;
}


.root2{
	display: block;
	width: 100%;
    flex-wrap: wrap;
}

.root2 dl{
	width: 100%;
}


.root2 dl dt{
	margin:0 0 5px;
    width: 100%;
}

.root2 dl dt >img{
	max-width: 100%;
}


.root2 dl dd{
	margin:0 0 20px;
}
    
    .root2 dl:first-child {
  width: 100%;
}
    
    .flex_location > div >.txtac >img{
        width: 100%;
    }
}