@charset "UTF-8";
/*国別ページ*/
#countryl{}

.contents h2{font-size:4.0rem;color: #004492; padding: 10px 0 20px}

.contents h2.title1{ font-size:2rem; letter-spacing: 0.1em; text-align: center; color: #212121; line-height: 1.3; padding-bottom: 0}

.contents .egl{ color: #7798BF; }
.contents .egl{ color: #7798BF; margin-bottom: 30px}
.contents .egl span:before,
	.contents .egl span:after,
	.contents.egl span:before,
	.contents .egl span:after,
	.contents .egl span:before,
	.contents .egl span:after{border-bottom: 1px solid #BBBBBB; }


/*indexname*/
#indexname{ overflow: hidden}
#indexname #mainphoto{ background: url(../voice/images/mainphoto.jpg) repeat-x center top;background-size: cover;height: 290px;}
#indexname #mainphoto img{ display: none}
#indexname h3.catch{ background: #006BBA; color: #fff; padding: 20px 0;font-size:2.0rem; }

/*国別一覧*/
#info {padding: 50px 0 50px;}
#info h3{font-size: 1.8rem;margin-top: 20px;padding: 10px; background: #006BBA; color: #fff;margin-bottom: 20px; border-radius: 5px;cursor: pointer;position: relative}
#info h3:after{  content: "OPEN ▼";font-family: 'Fira Sans Condensed', sans-serif; position: absolute;font-size: 14px;right: 12px; top: 12px;}
#info h3.active:after{  content: "CLOSE ▲";font-family: 'Fira Sans Condensed', sans-serif;}
#info h3 [class^="flug"] {  width: 50px;  height: 29px;  position: relative;  top: -1px;  margin-right: 10px;}
#info .country{display: none}
#info .country.active{display: block}
#info .country .box{border: 1px solid #CCCCCC;padding: 10px;border-radius: 5px;margin-bottom: 20px;}
#info .country li{display: inline-block;text-align: center;vertical-align: middle}
#info .country li:first-child{width: 15%}
#info .country li:first-child img{max-width: 100%}
#info .country li:nth-child(2){width: 70%;text-align: left;padding: 0 10px}
#info .country li:nth-child(3){width: 14%;}

#info .country li:nth-child(3) div{display: block; padding: 5px 10px; border-radius: 100px;color: #fff;background: #F28A00;font-size: 1.2rem;}
#info .country li:nth-child(3) div:hover{opacity: 0.7}



/*=======
以下詳細ページ
=========*/

/*名*/
#name{ overflow: hidden;}
/*国旗横画像*/
[class^="flug"] {  width: 80px;  height: 48px;  position: relative;  top: -10px;  margin-right: 10px;}


/*メイン画像*/
#topimg .w960{position: relative}
	#topimg #copy{position: absolute;bottom: 0;left: 0;background: url(../voice/images/copy_bg.png);width: 100%;padding: 20px;color: #fff;text-align: center;font-size: 1.6em;font-weight: bold}
	#topimg #mark{position: absolute;left: 0;bottom: 10%}

/*プロフィール*/
#profile{ overflow: hidden;margin: 50px auto; }
	#profile .left{ width: 46%; float: left}
	#profile .right{ width: 46%; float: right}
	#profile table{ width: 100%;border-spacing:0 0px;border-collapse: separate; margin: 0}
	#profile th{color: #26315F; font-size: 1.6rem; white-space: nowrap; width: 35%; padding: 5px; vertical-align: middle}
	#profile i{margin-left: 3px}
	#profile td{ padding: 5px; vertical-align: middle;}
	#profile .left tr:nth-child(2n+1) {background: #eee;}
	#profile .right tr:nth-child(2n) {background: #eee;}
	

#colom{margin: 30px auto; text-align: left}
	#colom h3{font-size: 2.3em;color: #FF716C;padding-bottom: 10px}
	
	#colom .colomR{margin-bottom: 60px;overflow: hidden}
		#colom .colomR .photo{float: right;margin-left: 40px;width: 400px}
		#colom .colomR p{overflow: hidden}
	#colom .colomL{margin-bottom: 60px;overflow: hidden}
		#colom .colomL .photo{float: left;margin-right: 40px;width: 400px}
		#colom .colomL p{overflow: hidden}
	#colom .photo div{margin-top: 5px;font-size: 12px}

@media only screen and (min-width: 768px) {/*PC*/


}

@media screen and (max-width: 767px) {/*SP*/
.contents h2{font-size:2.0rem;}
.contents h2.title1{ font-size:2.0rem; padding-bottom: 0}

/*
index
*/
#indexname #mainphoto{ background-size:cover;background-repeat: no-repeat;height: 150px; width: 100%; float: none}
#indexname h3.catch{ padding: 20px 10px;font-size:2.0rem;text-align: left; }
/*国別ワーキングホリデー情報*/
#info {padding: 20px 0 20px;}
#info .country ul{font-size: 0}
#info .country li{font-size: 13px}
#info .country li:first-child{width: 30%}
#info .country li:nth-child(2){width: 70%;border-bottom: 1px dotted #ccc;border-right: none}
#info .country li:nth-child(3){width:100%;text-align: center;font-size: 1.4rem;padding-top: 8px;padding-left: 0}




/*国旗横画像*/
[class^="flug"] {  width: 40px;  height: auto;  position: relative;  top: -5px;  margin-right: 10px;}
/*メイン画像*/
#topimg .w960{position: relative}
	#topimg #copy{position: relative;bottom: 0;left: 0;background: url(../voice/images/copy_bg.png);font-size: 1.2em;text-align: left}
	#topimg #mark{position: absolute;left: 0;bottom: 10%;top: 38%;width: 40%}

/*プロフィール*/
#profile{ overflow: hidden;margin: 50px auto; }
	#profile .left{ width: 100%; float: none;}
	#profile .right{ width: 100%; float: none;}
	#profile table{border-spacing:0px;}
	#profile th,#profile td{padding: 7px 5px}

#colom{margin: 30px auto; text-align: left;}
	
	#colom h3{ font-size:1.3rem; color: #fff;  text-align:left; background: #FF716C; padding: 8px;margin-bottom: 0px;margin-top: 0px;position: relative;cursor: pointer;width: 100%;display: block}
	#colom h3:after{  content: "OPEN ▼";font-family: 'Fira Sans Condensed', sans-serif; position: absolute;font-size: 14px;right: 12px;
	  top: 10px;}
	#colom h3.active:after{  content: "CLOSE ▲";font-family: 'Fira Sans Condensed', sans-serif;}
	
	#colom .ac{display: none;padding-top: 0;margin-top: 0}
	#colom .ac.active{display: block;}

	
	#colom .flex{display: flex;          /* flexコンテナ化 */
   flex-direction: column; /* 縦向きに配置 */}	
	#colom .colomR{margin-bottom: 10px;overflow:auto;}	
		#colom .colomR .photo{float:none;margin-left: 0px;order: 3;width: 100%}
		#colom .colomR p{margin-bottom: 20px;order: 2;}

	#colom .colomL{margin-bottom: 10px;overflow: hidden;}
		#colom .colomL .photo{float: none;margin-right: 0px;order: 3;width: 100%}
		#colom .colomL p{margin-bottom: 20px;order: 2;}

}