@charset "utf-8";

/*都市別*/
.lgk-color{color: #00B2B2;}
.bki-color{color: #1B8AC7;}
.pen-color{color: #C881DA;}
.kul-color{color: #FA5F5F;}

.photo-box-lgk{
    background: linear-gradient(-45deg, #3ca9ab 25%, #61b6b7 25%, #61b6b7 50%, #3ca9ab 50%, #3ca9ab 75%, #61b6b7 75%, #61b6b7);
    background-size: 4px 4px;
}

.photo-box-bki{
    background: linear-gradient(-45deg, #1B8AC7 25%, #5FADD8 25%, #5FADD8 50%, #1B8AC7 50%, #1B8AC7 75%, #5FADD8 75%, #5FADD8);
    background-size: 4px 4px;
}

.photo-box-pen{
    background: linear-gradient(-45deg, #C881DA 25%, #D089E2 25%, #D089E2 50%, #C881DA 50%, #C881DA 75%, #D089E2 75%, #D089E2);
    background-size: 4px 4px;
}

.photo-box-kul{
    background: linear-gradient(-45deg, #FA5F5F 25%, #FB7777 25%, #FB7777 50%, #FA5F5F 50%, #FA5F5F 75%, #FB7777 75%, #FB7777);
    background-size: 4px 4px;
}


.photo-box-inner h2{
    text-align: center;
    color: #FFF;
    font-size: 5vw;
	font-weight: bold;
    letter-spacing: .15em;
}
.local-box-inner h2{
    text-align: center;
    color: #333;
    font-size: 5vw;
	font-weight: bold;
    letter-spacing: .15em;
}

.photo-box-inner, .local-box-inner {
   padding: 6vw 0 4vw;
}

#info-box-lgk {
    background: url(../img/lgk/bg_info_lgk.jpg);
}
#info-box-bki {
    background: url(../img/bki/bg_info_bki.jpg);
}
#info-box-pen {
    background: url(../img/pen/bg_info_pen.jpg);
}
#info-box-kul {
    background: url(../img/kul/bg_info_kul.jpg);
}

/*------------------------------------------------
	ナビ
--------------------------------------------------*/
#gNavi {
    width: 100%;
    text-align: center;
    background-color: #FA5F5F;
}

#gNavi img {
    width: 40%;
    vertical-align: bottom;
}

#gNavi a {
    display: block;
    padding: 2vw 0;
}

/*------------------------------------------------
	インフォメーション
--------------------------------------------------*/
.info-box {
    padding: 5vw 0;
    background-size: cover!important;
    background-position: center top!important;
    padding-bottom: 1%;
}

.info-box img {
    width: 100%;
}

.info-box-inner .catch {
    font-size: 4.5vw;
    text-align: center;
    font-weight: bold;
    margin-bottom: 3vw;
    letter-spacing: .12em;
    line-height: 1.3em;
}

.info-box-inner{
    width: 100%;
    margin: 0 auto;
}

.info-textbox {
    display: flex;
    margin-left: 3vw;
    margin-bottom: 4vw;
    justify-content: space-between;
}

.info-box-lgk img {
    width: 100%;
}

.info-txt {
    width: 47%;
    font-size: 3.5vw;
    line-height: 1.2em;
    text-align: justify; 
}

.info-img {
    width: 50%;
    margin-right: 1vw;
}

.info-box-area {
    width: 100%;
    margin-top: 4vw;
}

.info-box-area-inner{
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #FFF;
    padding: 2vw;
    margin: 0 auto 2vw auto;
    border: 2px solid #E0E0E0;
}

.info-area-img{
    width: 43%;
}

.info-data {
    width: 95%;
    margin: 0 auto;
}

.info-area-name {
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 3.8vw;
    margin-bottom: 1vw;
}

.info-area-txt{
    width: 54%;
    float: left;
    font-size: 3.3vw;
    line-height: 1.2em;
}

/*-------------------------------------------------
  	写真で見る
--------------------------------------------------*/

.photo-box-inner{
    width: 93%;
    margin: 0 auto;
}

.photo-box-inner img {
    width: 100%;
}

.photo-box-inner h2:before{
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("../img/icon/ic_photo.png");
    background-size: contain;
    vertical-align: middle;
    margin: 0 auto 2vw;
}

.photo-txt {
    padding: 2vw 0 0 0;
    line-height: .82em;
    text-align: justify;
}

.photo-txt span {
	counter-increment: number;
	font-size:12px;
	line-height: 1.4;
}

.photo-txt span:before {
    content: counter(number);
    font-size: 10px;
    line-height: 1em;
    font-weight: bold;
    margin-right: 0.5%;
    color: #FFF;
    background: #333;
    border-radius: 100px;
    padding: .5px 5px;
}

/*--------------------------------------------------
  	現地スタッフのおすすめ
--------------------------------------------------*/

.local-box{
    background: linear-gradient(-45deg, #E1C2A4 25%, #EAD4BF 25%, #EAD4BF 50%, #E1C2A4 50%, #E1C2A4 75%, #EAD4BF 75%, #EAD4BF);
    background-size: 4px 4px;
}

.local-box img {
    width: 100%;
}

.local-box-inner{
    width: 93%;
    margin: 0 auto;
}

.local-box-inner h2:before{
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("../img/icon/ic_local.png");
    background-size: contain;
    vertical-align: middle;
    margin: 0 auto 2vw;
}

.staff-box {
    margin: 0 auto;
}

.staff-img {
    width: 25%;
    float: left;
    margin-right: 10px;
}

.staff-txt {
    width: 70%;
    font-size: 11px;
    line-height: 1.3em;
    float: left;
}
.staff-name {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: 3vw 0 1vw;
}

.local-data {
    float: left;
    width: 100%;
    background: #FFF;
    padding: 4.5vw;
    border-radius: 3px;
    position: relative;
    margin-top: 5vw;
    line-height: .8em;
}

.local-data:after {
    border-style: solid;
    border-width: 0 4vw 7vw 4vw;
    border-color: transparent transparent #fff transparent;
	top:-15px;
    left: 15vw;
	position:absolute;
}

.local-data-txt {
    font-size: 12px;
    margin-bottom: 3vw;
    line-height: 1.4;
}

.local-data-txt img {
    width: 100%;
}

.local-data-txt > .copy {
    margin-bottom: 1vw;
}

.data-box{
    margin-top: 3vw;
    line-height: 1.4;
}

.data-box:before{
    content: 'DATA';
    background: #333;
    font-size: 6px;
    color: #FFF;
    padding: 0 2%;
}

.local-data-img img:nth-child(2){
    float: left;
    width: 49%;
    margin-top: 2%;
    margin-right: 2%;
}

.local-data-img img:nth-child(3){
    float: left;
    width: 49%;
    margin-top: 2%;
}

.local-box-inner div:after,
.local-data:after {
    content: '';
    display: block;
    clear: both;
}

.attn {
    font-size: 11px;
    margin-top: 1.3vw;
    line-height: 1.1em;
}