@charset "utf-8";

/* mobile----------------------------------------------------*/
@media screen and (max-width: 480px) {

.main_pict{width: 100%; height: 360px; background-image: url(main_pict.jpg); background-size: cover;background-position: center;}

.midashi{width: 90%; margin: 60px auto 30px; text-align: center; font-family: serif; font-size: 1.6em; font-weight: bold;}
.lead{width: 80%; margin: 0 auto 60px; font-size: 1.2em; line-height: 1.8em;}

.flex_wrap{display: flex; flex-wrap: wrap;}
.flex_wrap li{margin: 10px 20px;}

.travel_box{width: 80%; margin: 60px auto; display: flex; justify-content: space-between;}
.travel {width: 16%;}
.travel img{width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 4px gray;}


.travel_a {width: 32%;}
.travel_a img{width: 100%; height: auto; box-shadow: 0 0 4px gray;}

}/* Tablet---------------------------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {

.main_pict{width: 100%; height: 360px; background-image: url(main_pict.jpg); background-size: cover;background-position: center;}

.midashi{width: 90%; margin: 60px auto 30px; text-align: center; font-family: serif; font-size: 1.6em; font-weight: bold;}
.lead{width: 80%; margin: 0 auto 60px; font-size: 1.2em; line-height: 1.8em;}

.flex_wrap{display: flex; flex-wrap: wrap;}
.flex_wrap li{margin: 10px 20px;}

.travel_box{width: 80%; margin: 60px auto; display: flex; justify-content: space-between;}
.travel {width: 16%;}
.travel img{width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 4px gray;}


.travel_a {width: 32%;}
.travel_a img{width: 100%; height: auto; box-shadow: 0 0 4px gray;}


}/* PC-------------------------------------------------------*/
@media print, screen and (min-width: 769px) {	
   
.main_pict{width: 100%; height: 360px; background-image: url(main_pict.jpg); background-size: cover;background-position: center;}

.midashi{width: 90%; margin: 60px auto 30px; text-align: center; font-family: serif; font-size: 1.6em; font-weight: bold;}
.lead{width: 80%; margin: 0 auto 60px; font-size: 1.2em; line-height: 1.8em;}

.flex_wrap{display: flex; flex-wrap: wrap;}
.flex_wrap li{margin: 10px 20px;}

.travel_box{width: 80%; margin: 60px auto; display: flex; justify-content: space-between;}
.travel {width: 16%;}
.travel img{width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 4px gray;}


.travel_a {width: 32%;}
.travel_a img{width: 100%; height: auto; box-shadow: 0 0 4px gray;}
}