@charset "UTF-8";

/* メインイメージ
---------------------------------------------------------*/
.contentpage .m_img_area {
	background-image: url("../images/guide/m_img@2x.jpg");}


/* com_lead
---------------------------------------------------------*/
.com_lead{
	position: relative;
	max-width: 1450px;
	margin: 0 auto;
}
.com_lead .com_lead_img > div{
	position: absolute;
	bottom: 0;
	width:18%;
	z-index: -1;
}
.com_lead .com_lead_img > div img{
	display: block;
}
.com_lead .com_lead_img > div:nth-child(1){
	left:1%;
}
.com_lead .com_lead_img > div:nth-child(2){
	right:1%;
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1300px) {
.com_lead{
	padding-bottom: 11vw;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.com_lead{
	padding-bottom: 0;
}
.com_lead .com_lead_img{
	width: 70%;
	margin: 2% auto 0;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.com_lead .com_lead_img > div{
	position: static;
	width:46.5%;
}
}



/* box1
---------------------------------------------------------*/
.gui_list1 li{
	position: relative;
	background: #EEF5DC;
	margin-bottom: 10px;
	overflow: hidden;
	padding: 45px 0 50px;
	box-sizing: border-box;
}
.gui_list1 li.menu2{
	background: #F5F5DC;}
.gui_list1 li.menu3{
	background: #F9EFED;}
.gui_list1 li.menu4{
	background: #EEE9F5;}
.gui_list1 li.menu5{
	background: #E3F0F9;}

.gui_list1 li::before{
	position: absolute;
	display: block;
	content: "";
	background: url("../images/guide/deco_r@2x.png")no-repeat bottom right;
	background-size: 100% auto;
	width: 32%;
	max-width: 468px;
	height: 320px;
	bottom: 0;
}
.gui_list1 li:nth-child(odd)::before{
	right: 0;
}
.gui_list1 li:nth-child(even)::before{
	background-image: url("../images/guide/deco_l@2x.png");
	background-position: left bottom;
	left: 0;
}
.gui_list1 li .bgimg{
	position: absolute;
	top:0;	
	width: 45%;
	max-width: 665px;
}
.gui_list1 li:nth-child(odd) .bgimg{
	left: 0;
}
.gui_list1 li:nth-child(even) .bgimg{
	right: 0;
}
.gui_list1 li .txtbox{
	position: relative;
	z-index: 3;
	width: 61%;
}
.gui_list1 li:nth-child(odd) .txtbox{
	margin: auto 0 auto auto;
}

/*gui_index*/
.gui_index{
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-align-items: center;
    align-items: center;
	margin-bottom: 1.3rem;
}
.gui_index dt{
	width: 6.4rem;
}
.gui_index dd{
	width: calc(100% - 7.2rem);
}
.gui_index dd p{
	font-size:135%;
	letter-spacing: 0.09em;
	line-height: 1.5em;
	color: #63633A;
	margin-bottom: .3em;
}
.gui_list1 li.menu1 .gui_index dd p{
	color: #607720;}
.gui_list1 li.menu2 .gui_index dd p{
	color: #997B20;}
.gui_list1 li.menu3 .gui_index dd p{
	color: #CE6D4E;}
.gui_list1 li.menu4 .gui_index dd p{
	color: #726989;}
.gui_list1 li.menu5 .gui_index dd p{
	color: #4370A1;}

.gui_index dd h3{
	font-size: 290%;
	font-weight: normal;
	letter-spacing: 0.15em;
	line-height: 1.2em;
	color: #2A3A4B;
}
.gui_index dd h3 span{
	font-size:67%;
	letter-spacing: 0.13em;
}
.com_btn3{
	margin-top: 1.8rem;
}
.gui_list1 li.menu1 .com_btn3 p{
	background: #80924D;}
.gui_list1 li.menu2 .com_btn3 p{
	background: #AD954D;}
.gui_list1 li.menu3 .com_btn3 p{
	background: #DE9D89;}
.gui_list1 li.menu4 .com_btn3 p{
	background: #8E87A1;}
.gui_list1 li.menu5 .com_btn3 p{
	background: #698DB4;}

.gui_list1 li.menu1 .com_btn3::before,
.gui_list1 li.menu1 .com_btn3 p::after{
	background: #607720;}
.gui_list1 li.menu2 .com_btn3::before,
.gui_list1 li.menu2 .com_btn3 p::after{
	background: #997B20;}
.gui_list1 li.menu3 .com_btn3::before,
.gui_list1 li.menu3 .com_btn3 p::after{
	background: #D6856B;}
.gui_list1 li.menu4 .com_btn3::before,
.gui_list1 li.menu4 .com_btn3 p::after{
	background: #726989;}
.gui_list1 li.menu5 .com_btn3::before,
.gui_list1 li.menu5 .com_btn3 p::after{
	background: #4370A1;}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1400px) {
.gui_list1 li .txtbox{
	width: 70%;
}
/*gui_index*/
.gui_index dt{
	width: 7.5vw;
}
.gui_index dd{
	width: calc(100% - 8.3vw);
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.gui_list1 li{
	padding: 3% 0;
}
.gui_list1 li .txtbox{
	width: 70%;
}

/*gui_index*/
.gui_index{
	margin-bottom: .8rem;
}
.gui_index dt{
	width:4.3rem;
}
.gui_index dd{
	width: calc(100% - 4.9rem);
}
.gui_index dd p{
	font-size: 115%;
}
.gui_index dd h3{
	font-size: 200%;
}
.gui_index dd h3 span{
	font-size:67%;
	letter-spacing: normal;
}
	
.com_btn3{
	margin-top: 1rem;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.gui_list1 li{
	padding: 6rem 0 5%;
}
.gui_list1 li::before{
	width: 50%;
}
.gui_list1 li .bgimg{
	width: 70%;
}
.gui_list1 li .txtbox{
	width: 100%;
}

/*gui_index*/
.gui_index{
	display: -webkit-block;
	display: block;
	margin-bottom: .5rem;
}
.gui_index dt{
	width: 4rem;
	margin: 0 auto .5rem;
	text-align: center;
}
.gui_index dd{
	width:100%;
	text-align: center;
}
.gui_index dd p{
	font-size:95%;
	letter-spacing: 0.05em;
	margin-bottom: .15em;
}
.gui_index dd h3{
	font-size: 140%;
	font-weight: normal;
	letter-spacing: 0.1em;
}
.gui_index dd h3 span{
	font-size:67%;
	letter-spacing: normal;
}
	
.com_btn3{
	margin-top: 1rem;
}
}





/* box2
---------------------------------------------------------*/
.contentpage #pagebody{
	padding-bottom: 0;
}
.box2{
	background: #F8F7EE;
	padding: 50px 0 100px;
}
.gui_list2{
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: -3.5%;
}
.gui_list2 li{
	width: 48.2%;
	border:1px solid #7E7D5B;
	background: #fff;
	box-sizing: border-box;
	padding: 35px 3%;
	margin-bottom: 3.5%;
}
.gui_list2 li .com_btn3{
	margin-left: auto;
	margin-right: auto;
}
.gui_list2 li .com_btn3 p{
	background: #98977c;}
.gui_list2 li .com_btn3::before,
.gui_list2 li .com_btn3 p::after{
	background: #7e7d5b;}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1400px) {
/*gui_index*/
.gui_list2 li .gui_index dd p{
	font-size: 1.5vw;
}
.gui_list2 li .gui_index dd h3{
	font-size: 3vw;
}
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1200px) {
.gui_list2 li{
	width: 49%;
	padding: 3vw 3%;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box2{
	padding: 5% 0 10%;
}
.gui_list2{
	margin-bottom: -2%;
}
.gui_list2 li{
	width: 49%;
	padding: 2.5% 3%;
	margin-bottom: 2%;
}
	
/*gui_index*/
.gui_list2 li .gui_index dt{
	width: 3.3rem;
}
.gui_list2 li .gui_index dd{
	width: calc(100% - 4rem);
}
.gui_list2 li .gui_index dd p{
	font-size: 105%;
	letter-spacing: normal;
}
.gui_list2 li .gui_index dd h3{
	font-size: 160%;
	letter-spacing: normal;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box2{
	padding:5% 0 10%;
}
.gui_list2{
	display: -webkit-block;
	display: block;
	margin-bottom: -3%;
}
.gui_list2 li{
	width: 100%;
	padding: 4% 3%;
	margin-bottom: 3%;
}
}