@charset "utf-8";

/* header {
  background-color: rgba(255, 255, 255, 0.9);
} */

img {
  width: 100%;
}

#content_Wrap {
  padding: 0;
  color: #000;
  background: #fff;
}

.pos {
  position: relative;
}

.cap_txt {
  position: absolute;
  bottom: 5px;
  font-size: 12px;
  line-height: 1;
}

.cap_R {
  right: 5px;
}

.cap_L {
  left: 5px;
}

.cap_W {
  color: #fff;
}

.sec_Ttl {
  margin-bottom: 30px;
  font-size: 45px;
  font-feature-settings: "palt";
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

#main_Img {
  position: relative;
  margin-bottom: 0px;
}

#main_Img h2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: 1;
  color: #fff;
  font-size: 7vw;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

#main_Img .cap_Txt {
margin: 0 auto;
left: 10px;
bottom: 17%;
text-align: center;
}

#main_Img img {
  clip-path: circle(160% at 50% -110.5%);
}

.main_Copy {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 80px;
  writing-mode: vertical-rl;
}


.main_Copy h3 {
  position: relative;
  margin-left: 1em;
  font-size: 32px;
  line-height: 1.6;
}

.main_Copy span {
  display: block;
  position: absolute;
  top: -160px;
  right: 0.7em;
  width: 2px;
  height: 150px;
  background-color: #72151a;
}
.main_Copy .tate {
  text-combine-upright: all;
}

.main_Copy p {
  font-size: 18px;
  line-height: 2.4;
}

.img_Box01 {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
}

.pc_photo {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 1200px;
  width: 94%;
  margin: 0 auto;
}

.photo_Box {
  position: relative;
  overflow: hidden;
}

div[class^="ph_"] {
  width: calc((100% - 10px) / 6);
}

div[class^="flex column"] {
  flex-direction: column;
  flex-wrap: wrap;
}

div[class^="flex column"] div[class^="ph_"] {
  width: 100%;
}

/* 個別設定 */
.area_Kagoshima {
  margin-top: 100px;
  margin-bottom: 100px;
}

.Box01 {
  max-width: 1200px;
  width: 94%;
  margin: 0 auto 2px;
}

.Box01 .line1,
.Box01 .line2,
.Box01 .line3 {
  margin-bottom: 2px;
}

.Box01 .ph_01,
.Box01 .ph_02,
.Box01 .ph_03,
.Box01 .ph_04,
.Box01 .ph_05,
.Box01 .ph_07,
.Box01 .ph_08,
.Box01 .ph_09,
.Box01 .ph_10,
.Box01 .ph_11,
.Box01 .ph_13,
.Box01 .ph_14,
.Box01 .ph_15,
.Box01 .ph_16,
.Box01 .ph_17,
.Box01 .ph_19 {
  margin-right: 2px;
}

.Box01 .ph_19 {
  width: calc((((100% - 10px) / 6) * 5) + 8px);
}

.Box02 {
  width: calc((((100% - 4px) / 3) *2) + 2px);
  margin-right: 2px;
  margin-bottom: 2px;
}

.Box02 .column1,
.Box02 .column3,
.Box02 .column4 {
  margin-right: 2px;
}

.Box02 .ph_01,
.Box02 .ph_03,
.Box02 .ph_04,
.Box02 .ph_06,
.Box02 .ph_08 {
  margin-bottom: 2px;
}

.Box03 {
  width: calc((100% - 4px) / 3);
}

.Box03 .ph_07 {
  width: 100%;
}

.Box03 .line1 {
  flex-direction: column;
  flex-wrap: wrap;
}

.Box03 .column1,
.Box03 .column2 {
  margin-right: 2px;
}

.Box03 .ph_01,
.Box03 .ph_02,
.Box03 .ph_03,
.Box03 .ph_04,
.Box03 .ph_05,
.Box03 .ph_06 {
  margin-bottom: 2px;
}

.area_Tenmonkan {
  margin: 100px auto;
}

.Box04 {
  max-width: 1200px;
  width: 94%;
  margin: 0 auto 2px;
}

.Box04 .line1,
.Box04 .line2,
.Box04 .line3 {
  margin-bottom: 2px;
}

.Box04 .ph_01,
.Box04 .ph_02,
.Box04 .ph_03,
.Box04 .ph_04,
.Box04 .ph_05,
.Box04 .ph_07,
.Box04 .ph_08,
.Box04 .ph_09,
.Box04 .ph_10,
.Box04 .ph_11,
.Box04 .ph_13,
.Box04 .ph_14,
.Box04 .ph_15,
.Box04 .ph_16,
.Box04 .ph_17,
.Box04 .ph_19,
.Box04 .ph_20 {
  margin-right: 2px;
}

.Box04 .ph_20 {
  width: calc((((100% - 10px) / 6) * 4) + 6px);
}

.Box05 {
  width: calc((((100% - 16px) / 9) * 5) + 8px);
  margin-right: 2px;
}

.Box05 .line1,
.Box05 .line2 {
  margin-bottom: 2px;
}

.Box05 .ph_01,
.Box05 .ph_02,
.Box05 .ph_03,
.Box05 .ph_04,
.Box05 .ph_05,
.Box05 .ph_06 {
  margin-right: 2px;
}

.Box05 .ph_01,
.Box05 .ph_03,
.Box05 .ph_04,
.Box05 .ph_05,
.Box05 .ph_06 {
  width: calc((100% - 8px) / 5);
}

.Box05 .ph_02 {
  width: calc((((100% - 8px) / 5) * 3) + 4px);
}

.Box05 .ph_07 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc((((100% - 8px) / 5) * 3) + 4px);
  z-index: 0;
}

.Box06 {
  width: calc((((100% - 16px) / 9) * 4) + 6px);
}

.Box06 .line1 {
  margin-bottom: 2px;
}

.Box06 .ph_01 {
  width: calc((((100% - 6px) / 4) * 3) + 4px);
  margin-right: 2px;
}

.Box06 .width01 {
  width: calc((100% - 6px) / 4);
}

.Box06 .ph_02,
.Box06 .ph_03 {
  width: 100%;
}

.Box06 .ph_05,
.Box06 .ph_06,
.Box06 .ph_07 {
  width: calc((100% - 6px) / 4);
}

.Box06 .ph_09 {
  width: calc((((100% - 6px) / 4) * 2) + 2px);
}

.Box06 .ph_02 {
  margin-bottom: 2px;
}

.Box06 .ph_06,
.Box06 .ph_07 {
  margin-right: 2px;
}

.map_Block {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}


/*-----------------------------
sp
-----------------------------*/
@media only screen and (max-width: 830px) {

  .sec_Ttl {
    margin-bottom: 20px;
    font-size: 32px;
  }

  #main_Img {
    position: relative;
    margin-bottom: 30px;
  }
  
  #main_Img .cap_Txt {
  bottom: 10%;
  }

  #main_Img h2 {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -30%);
    z-index: 1;
	font-size: 12vw;
	margin-bottom: 0;
  }

  #main_Img img {
    clip-path: circle(140% at 50% -33%);
  }

  .main_Copy {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 40px;
    writing-mode: vertical-rl;
  }

  .main_Copy h3 {
    position: relative;
    margin-left: 1em;
    font-size: 20px;
    line-height: 1.6;
  }

  .main_Copy span {
    display: block;
    position: absolute;
    top: -60px;
    right: 0.7em;
    width: 1px;
    height: 50px;
    background-color: #72151a;
  }

  .main_Copy p {
    font-size: 12px;
    line-height: 2;
  }

  .img_Box01 {
    margin-bottom: 50px;
  }

  .pc_photo {
    flex-direction: column;
    width: 100%;
  }

  div[class^="ph_"] {
    width: calc((100% - 10px) / 6);
  }

  div[class^="flex column"] {
    flex-direction: column;
    flex-wrap: wrap;
  }

  div[class^="flex column"] div[class^="ph_"] {
    width: 100%;
  }

  /* 個別設定 */
  .area_Kagoshima {
    margin-top: 80px;
  }

  .Box01 {
    width: 100%;
    margin: 0 auto 2px;
  }

  .Box02 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2px;
  }

  .Box03 {
    width: 100%;
  }

  .Box03 .line1 {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .Box03 .line1>.flex {
    justify-content: space-between;
    width: calc((100% - 2px) / 2);
  }

  .Box03 .column1,
  .Box03 .column2,
  .Box03 .column3 {
    width: calc((100% - 4px) / 3);
  }

  .Box03 .ph_01,
  .Box03 .ph_02,
  .Box03 .ph_03,
  .Box03 .ph_04,
  .Box03 .ph_05,
  .Box03 .ph_06 {
    margin-bottom: 2px;
  }

  .area_Tenmonkan {
    margin: 100px auto;
  }

  .Box04 {
    width: 100%;
  }

  .Box05 {
    width: 100%;
    margin-right: 0;
  }

  .Box05 .ph_01,
  .Box05 .ph_03,
  .Box05 .ph_04,
  .Box05 .ph_05,
  .Box05 .ph_06 {
    width: calc((100% - 10px) / 6);
  }

  .Box05 .ph_02 {
    width: calc((((100% - 10px) / 6) * 3) + 4px);
  }

  .Box05 .ph_07 {
    position: absolute;
    top: 0;
    right: 0;
    width: calc((((100% - 10px) / 6) * 4) + 6px);
    z-index: 0;
  }

  .Box06 {
    width: 100%;
  }

  .Box06 .line1 {
    margin-bottom: 2px;
  }

  .Box06 .ph_01 {
    width: calc((((100% - 10px) / 6) * 4) + 6px);
    background-color: #555;
  }

  .Box06 .width01 {
    width: calc((((100% - 10px) / 6) * 2) + 2px);
  }

  .Box06 .width01>.column1,
  .Box06 .width01>.column2 {
    width: calc((100% - 2px) / 2);
  }

  .Box06 .width01>.column1 {
    margin-right: 2px;
  }

  .Box06 .ph_05,
  .Box06 .ph_06,
  .Box06 .ph_07 {
    width: calc((100% - 10px) / 6);
  }

  .Box06 .ph_09 {
    width: calc((((100% - 10px) / 6) * 3) + 4px);
  }

  .Box06 .ph_02 {
    margin-right: 2px;
  }

  .Box06 .ph_04 {
    margin-bottom: 2px;
  }

  .Box06 .ph_08 {
    margin-right: 2px;
  }


}





/* =========================
 sssP
========================= */
figure{position: relative;}
.main_head {
    padding: 40px 0;
    text-align: center;
}
.main_head .main_head_ttl {
    font-size: 34px;
    letter-spacing: 0.2em;
    color: #c2a448;
    margin-bottom: 14px;
}
.main_head p {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: #fff;
}

.ttl_area {
    width: 100%;
    padding: 70px 0;
}
.ttl_area_inner {
    width: 94%;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
}
.ttl_area h3 {
    font-size: 26px;
    line-height: 1.8;
    letter-spacing: 3px;
    color:#931c21;
    text-align: center;
    margin: 0 auto 30px;
}
.ttl_area p {
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1.8;
    color: #000;
}


.sss_area {
    width: 100%;
}
.sss_area ul.flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sss_area ul.flex li.flex1-1 {
    width: 100%;
}
/* .sss_area ul.flex li.flex2-1 {
width: 49.7%;
margin-top: 0.5%;
margin-bottom: 0.5%;
} */
.sss_area ul.flex li.flex3-1 {
    width: 33.1%;
    margin-top: 0.3%;
    margin-bottom: 0.3%;
}
.sss_area ul.flex li {
    position: relative;
}
.sss_area ul.flex li img {
    max-width: 100%;
}
span.caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #fff;
    text-shadow: 0px 0px 5px #000, 0px 0px 10px #000;
}


.flow_area {
    font-size: 26px;
    line-height: 1.8;
    letter-spacing: 3px;
    width: 100%;
    padding: 80px 0 30px;
}
.flow_area h3 {
    color: #931c21;
    /* max-width: 90%; */
    margin: 0 auto 50px;
    /* height: 28px; */
    text-align: center;
}
.flow_area h3 img {
    max-width: 100%;
    max-height: 100%;
}
.flow_area .flow {
    width: 1060px;
    max-width: 95%;
    margin: 0 auto 80px;
}
.flow_area .flow .flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #907222;
}
.flow_area .flow .flex .flex2-1 {
    width: 50%;
    background: #FFF;
}
.flow_area .flow .flex .flex2-1.right {
    padding: 2% 1%;
}
.flow_area .flow .flex li {}
.flow_area .flow .flex li img {
    max-width: 100%;
}

.flow_area .flow .flex .flex2-1.right h4 {
    font-size: 21px;
    color: #907222;
    padding: 7px 0 15px;
    text-align: left;
    box-sizing: border-box;
}
.flow_area .flow .flex .flex2-1.right h4 span {
    font-size: 23px;
    padding: 5px 10px;
    margin: 0 3%;
    border: 1px solid;
}

.flow_area .flow .flex .flex2-1.right p {
    font-size: 15px;
    margin: 0 0 10px 20px;
    line-height: 1.6;
    box-sizing: border-box;
}
.flow_area .flow .flex .flex2-1.right p small {
    font-size: 12px;
}
.flow_area .flow .flex .flex2-1.right p span {
    font-size: 14px;
    border: 1px solid #4a341a;
    padding: 2px;
    margin: 0 3px;
    vertical-align: 2px;
}

.flow_area ul.flex li {
    position: relative;
}

.arrow {
    max-width: 85px;
    text-align: center;
    padding: 20px 0;
    margin: 0 auto;
}
.arrow img {
    width: 100%;
}

@media only screen and (min-width: 770px) {
}





/*-----------------------------
tab
-----------------------------*/
@media only screen and (max-width: 1024px) {


}


/*-----------------------------
tab・sp
-----------------------------*/
@media only screen and (max-width: 767px) {

    .main_head {
        padding: 30px 0;
        text-align: center;
    }
    .main_head .main_head_ttl {
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: 0.3em;
        color: #c2a448;
        margin-bottom: 14px;
    }
    .main_head p {
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: 0.2em;
        color: #fff;
    }



/*
    .mainimg {
        padding-top: 82%;
        background-image: url(../img/main_sp.jpg);
    }
    .mv_txtbox h2{
        color: #c2a448;
        font-size: 25px;
        margin-bottom: 20px;
        letter-spacing: 0.12em;
        line-height: 1;
    }
    .mv_txtbox p{
        font-size: 15px;
        letter-spacing: 0.1em;
        line-height: 1;
        color: #fff;
    }
*/

    .ttl_area {
        padding: 30px 0;
    }
    .ttl_area h3 {
        font-size: 20px;
    }
    .ttl_area p {
        font-size: 15px;
        text-align: left;
    }

    span.caption {
        right: 5px;
        bottom: 5px;
    }
    
    .flow_area {
        font-size: 20px;
        padding: 40px 0;
    }
    .flow_area h3 {
        height: auto;
        margin: 0 auto 30px;
    }
	.flow_area .flow {
	margin: 0 auto 40px;
	}
    .flow_area .flow .flex .flex2-1 {
        width: 100%;
    }
    .flow_area .flow .flex .flex2-1.right {
        padding: 20px 3%;
    }
    .flow_area .flow .flex .flex2-1.right h4 {
        font-size: 20px;
        text-indent: -2.5em;
        padding-left: 2.5em;
        line-height: 1.3;
    }
    .flow_area .flow .flex .flex2-1.right h4 span {
        margin: 0 3% 0 0;
    }
    .flow_area .flow .flex .flex2-1.right p {
        margin: 0 0 10px;
    }

    
    
}