@charset "UTF-8";


html {
  overflow-y: scroll;
}
body {
	font-size: 16px;
  text-align: center;
  line-height: 2;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  color: #333;
  font-feature-settings: "palt";
  letter-spacing: .05em;
}
a,a:link {
	text-decoration: none;
}
img {
  vertical-align: bottom;
}
a img:hover { 
  opacity: 0.7;
}

#top {
	position: fixed;
	bottom: 40px;
	right: -81px;
	z-index: 998;
}

.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 767px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


/* ================================
    Header
================================ */

@media (min-width:768px) {

/* ヘッダーのロゴ部分 */
.header {
  position: relative;
  width: 100%;
  height: 100px;
}
.header-title {
  position: absolute;
  left: 30px;
  top: 12px;
}
.header-title img {
  object-fit: contain;
}
.navbase {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.navbox {
  background-color: #8ac1d2;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  right: 0;
  border: 1px solid #fff;
}

/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #a1cddb;
  transition: ease .4s;
}
.nav-items {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 140px;
  position: relative;
}
.navi-logo {
  position: absolute;
  left: 30px;
  top: 12px;
}

/* ナビのリンク */
.nav__items li {
  list-style-type: none;
}
.navi-01 {
  position: absolute;
  left: 0px;
  top: 0px;
}
.navi-02 {
  position: absolute;
  left: 0px;
  top: 45px;
}
.navi-03 {
  position: absolute;
  left: 0px;
  top: 90px;
}
.navi-04 {
  position: absolute;
  left: 48px;
  top: 136px;
}
.navi-05 {
  position: absolute;
  left: 48px;
  top: 177px;
}
.navi-06 {
  position: absolute;
  left: 48px;
  top: 217px;
}
.navi-07 {
  position: absolute;
  left: 48px;
  top: 257px;
}
.navi-08 {
  position: absolute;
  left: 48px;
  top: 298px;
}
.navi-09 {
  position: absolute;
  left: 48px;
  top: 340px;
}
.navi-10 {
  position: absolute;
  left: 48px;
  top: 379px;
}
.navi-11 {
  position: absolute;
  left: 48px;
  top: 419px;
}
.navi-contact {
  position: absolute;
  left: 500px;
  top: 0px;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  color: #fff;
  z-index: 2;
}
.navi-contact a {
  color: #fff;
  text-decoration: none;
}
.navi-contact a:hover {
  color: #fff;
  text-decoration: underline;
}
.navi-contact-st {
  margin-bottom: 10px;
  letter-spacing: .2em;
}
.navi-contact-tel {
  margin-top: 10px;
}
.navi-followus {
  position: absolute;
  left: 500px;
  top: 215px;
  line-height: 0;
}
.navi-sns-wrap {
  width: 280px;
  position: absolute;
  left: 500px;
  top: 261px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.navi-btn-08 {
  position: absolute;
  left: 500px;
  top: 340px;
}

/* ハンバーガーメニュー */
.header__hamburger {
  width: 60px;
  height: 100%;
}
.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: relative;
  transition: ease .4s;
  display: block;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  margin: 12px 0;
}
.hamburger span:nth-child(3) {
  top: 0;
}

/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
  top: 14px;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: -14px;
  transform: rotate(-45deg);
}

}

@media (max-width:767px) {

/* ヘッダーのロゴ部分 */
.header {
  width: 100%;
  height: 60px;
  background-image: url("../images/sp_header_logo.png");
  background-repeat: no-repeat;
  background-position: left top;
}
.header-title {
  width: 100%;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
}
.header-title img {
  object-fit: contain;
}
.navbase {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.navbox {
  background-color: #8ac1d2;
  width: 60px;
  height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  border: 1px solid #fff;
}

/* ヘッダーのナビ部分 */
.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #a1cddb;
  transition: ease .4s;
  background-image: url("../images/sp_header_logo.png");
  background-repeat: no-repeat;
  background-position: left top;
}
.nav-items {
  width: 78%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  text-align: left;
}

/* ナビのリンク */
.nav__items li {
  list-style-type: none;
}
.navi-01 {
  width: 21%;
}
.navi-02 {
  width: 66%;
  margin-top: 1%;
}
.navi-03 {
  width: 66%;
  margin-top: 1%;
}
.navi-04 {
  width: 49%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-05 {
  width: 34%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-06 {
  width: 31%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-07 {
  width: 42%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-08 {
  width: 35%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-09 {
  width: 37%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-10 {
  width: 87%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-11 {
  width: 38%;
  margin-top: 0.5%;
  margin-left: 10%;
}
.navi-contact {
  font-size: clamp(1rem, 0.88rem + 0.51vw, 1.125rem);
  line-height: 1.6;
  color: #fff;
  margin-top: 6%;
  z-index: 2;
}
.navi-contact a {
  color: #fff;
  text-decoration: none;
}
.navi-contact a:hover {
  color: #fff;
  text-decoration: underline;
}
.navi-contact-st {
  margin-bottom: 2%;
  letter-spacing: .2em;
}
.navi-contact-tel {
  margin-top: 2%;
}
.navi-sns-wrap {
  width: 100%;
  margin-top: 6%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.navi-followus {
  width: 32.6%;
}
.navi-note {
  width: 19.4%;
}
.navi-facebook {
  width: 8.3%;
}
.navi-instagram {
  width: 8.3%;
}
.navi-youtube {
  width: 12%;
}
.navi-btn-08 {
  width: 100%;
  margin-top: 7%;
}

/* ハンバーガーメニュー */
.header__hamburger {
  width: 40px;
  height: 100%;
}
.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: relative;
  transition: ease .4s;
  display: block;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  margin: 8px 0;
}
.hamburger span:nth-child(3) {
  top: 0;
}

/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
  top: 10px;
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  top: -10px;
  transform: rotate(-45deg);
}

}

/* ================================
    PC、Tablet用CSS
================================ */

@media (min-width:768px) {

/* 南小国町ってこんなところ */
.about {
  width: 100%;
  height: 1405px;
  min-width: 1000px;
  background:
  url("../images/pc_bg_about_02.png") no-repeat calc(50% + 480px) 676px,
  url("../images/pc_bg_about_01.png") no-repeat calc(50% - 454px) 715px,
  url("../images/pc_bg_title_02.png") no-repeat center top,
  url("../images/pc_bg_title_01.png") repeat-x center top;
}
.about > .inner{
  width: 1000px;
  height: 1405px;
  position: relative;
  margin: 0px auto;
}
#slider {
  width: 1000px;
  height: 550px;
  position: absolute;
  left: 0px;
  top: 110px;
}
.titlecopy {
  position: absolute;
  left: 690px;
  top: 36px;
}
.about-01 {
  position: absolute;
  left: 165px;
  top: 598px;
}
.about-02 {
  position: absolute;
  left: 47px;
  top: 864px;
}
.about-03 {
  position: absolute;
  left: 500px;
  top: 860px;
  width: 356px;
  text-align: justify;
}
.btn-01 {
  position: absolute;
  left: 299px;
  top: 1268px;
}

/* 来訪者からの声 */
.voice {
  width: 100%;
  height: 1350px;
  min-width: 1000px;
  padding-top: 80px;
  background-color: #fcf9f2;
}
.voice > .inner{
  width: 1000px;
  height: 1350px;
  position: relative;
  margin: 0px auto;
}
.voice-01b {
  font-size: 18px;
  margin-top: 40px;
}
.voice-02 {
  margin-top: 60px;
}
.voice-03 {
  margin-top: 60px;
}

/* 人材還流事業をはじめた理由 */
.mind {
  width: 100%;
  height: 980px;
  min-width: 1000px;
  background-color: #fcf9f2;
}
.mind > .inner{
  width: 1000px;
  height: 980px;
  position: relative;
  margin: 0px auto;
}
.mind-02 {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  width: 900px;
  height: 160px;
  background-color: #ef9440;
  margin: 45px auto 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mind-03 {
  font-size: 18px;
  margin: 45px auto 0px;
  width: 640px;
  text-align: justify;
}
.text-orange {
  color: #ef9440;
}

/* 南小国町人材還流事業のスキーム */
.scheme {
  width: 100%;
  height: 1800px;
  min-width: 1000px;
  padding-top: 60px;
  background:
  url("../images/pc_bg_scheme.png") no-repeat center 569px;
  background-color: #f3f9fa;
}
.scheme > .inner {
  width: 1000px;
  height: 1800px;
  position: relative;
  margin: 0px auto;
}
.scheme-02 {
  width: 904px;
  height: 1051px;
  position: relative;
  margin: 60px auto 0px;
  background:
  url("../images/pc_scheme_02.png") no-repeat left top;
}
.scheme-03 {
  position: absolute;
  left: 81px;
  top: 150px;
}
.scheme-04 {
  position: absolute;
  left: 81px;
  top: 228px;
}
.scheme-05 {
  position: absolute;
  left: 588px;
  top: 305px;
}
.scheme-06 {
  position: absolute;
  left: 588px;
  top: 383px;
}
.scheme-07 {
  position: absolute;
  left: 588px;
  top: 461px;
}
.scheme-08 {
  position: absolute;
  left: 81px;
  top: 575px;
}
.scheme-09 {
  position: absolute;
  left: 81px;
  top: 658px;
}
.scheme-10 {
  position: absolute;
  left: 81px;
  top: 741px;
}

/* loop */
.loopbox {
  overflow: hidden;
  padding-bottom: 80px;
  background-color: #f3f9fa;
}
.loop_wrap {
  display: flex;
  width: 100vw;
  height: 250px;
}
.loop_wrap img {
  width: auto;
  height: 100%;
  max-inline-size: 2700px;
}

/* 企業版ふるさと納税 */
.tax {
  width: 100%;
  height: 1470px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_01.png") no-repeat calc(50% + 294px) 33px;
  background-color: #fcf9f2;
}
.tax > .inner{
  width: 1100px;
  height: 1470px;
  position: relative;
  margin: 0px auto;
}
.tax-02 {
  position: absolute;
  left: 50px;
  top: 205px;
}
.tax-03 {
  position: absolute;
  left: 674px;
  top: 205px;
}
.tax-03b {
  position: absolute;
  left: 674px;
  top: 340px;
  width: 340px;
  text-align: justify;
}
.tax-04 {
  position: absolute;
  left: 40px;
  top: 707px;
}
.btn-02 {
  position: absolute;
  left: 674px;
  top: 508px;
}
.btn-03 {
  position: absolute;
  left: 674px;
  top: 593px;
}

/* 視察・研修 */
.inspection {
  width: 100%;
  height: 810px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_01.png") no-repeat calc(50% - 428px) 50px;
  background-color: #fcf9f2;
}
.inspection > .inner{
  width: 1100px;
  height: 810px;
  position: relative;
  margin: 0px auto;
}
.inspection-02 {
  position: absolute;
  left: 494px;
  top: 202px;
}
.inspection-03 {
  position: absolute;
  left: 102px;
  top: 206px;
}
.inspection-03b {
  position: absolute;
  left: 102px;
  top: 395px;
  width: 310px;
  text-align: justify;
}
.btn-04 {
  position: absolute;
  left: 102px;
  top: 585px;
}
.btn-05 {
  position: absolute;
  left: 102px;
  top: 665px;
}

/* 移住ツアー */
.tour {
  width: 100%;
  height: 740px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/pc_tour_02b.png") no-repeat calc(50% + 452px) 434px,
  url("../images/pc_tour_02a.png") no-repeat calc(50% - 305px) 270px,
  url("../images/bg_cnt_02.png") no-repeat calc(50% + 338px) 10px;
  background-color: #fcf9f2;
}
.tour > .inner{
  width: 1100px;
  height: 740px;
  position: relative;
  margin: 0px auto;
}
.tour-03 {
  position: absolute;
  left: 558px;
  top: 200px;
}
.tour-03b {
  position: absolute;
  left: 558px;
  top: 337px;
  width: 280px;
  text-align: justify;
}
.btn-06-tour {
  position: absolute;
  left: 558px;
  top: 569px;
}

/* インターンシップ */
.internship {
  width: 100%;
  height: 800px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_03.png") no-repeat calc(50% - 288px) 50px;
  background-color: #fcf9f2;
}
.internship > .inner{
  width: 1100px;
  height: 800px;
  position: relative;
  margin: 0px auto;
}
.internship-02 {
  position: absolute;
  left: 494px;
  top: 204px;
}
.internship-03 {
  position: absolute;
  left: 103px;
  top: 208px;
}
.internship-03b {
  position: absolute;
  left: 103px;
  top: 345px;
  width: 310px;
  text-align: justify;
}
.btn-06-internship {
  position: absolute;
  left: 103px;
  top: 615px;
}

/* ふるさと兼業 */
.kengyo {
  width: 100%;
  height: 710px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_03.png") no-repeat calc(50% + 288px) 120px;
  background-color: #fcf9f2;
}
.kengyo > .inner{
  width: 1100px;
  height: 710px;
  position: relative;
  margin: 0px auto;
}
.kengyo-01 {
  position: absolute;
  left: 384px;
  top: 57px;
}
.kengyo-02 {
  position: absolute;
  left: 75px;
  top: 257px;
}
.kengyo-03 {
  position: absolute;
  left: 138px;
  top: 0px;
}
.kengyo-04 {
  position: absolute;
  left: 688px;
  top: 259px;
}
.kengyo-04b {
  position: absolute;
  left: 688px;
  top: 396px;
  width: 310px;
  text-align: justify;
}
.btn-06-kengyo {
  position: absolute;
  left: 688px;
  top: 591px;
}

/* ふるさと兼業＋ */
.kengyo-plus {
  width: 100%;
  height: 500px;
  min-width: 1000px;
  padding-top: 70px;
  background-color: #fcf9f2;
}
.kengyo-plus > .inner{
  width: 1000px;
  height: 500px;
  position: relative;
  margin: 0px auto;
}
.kengyo-05 {
  position: relative;
  width: 1000px;
  height: 409px;
  background:
  url("../images/pc_kengyo_05.png") no-repeat center top;
}
.kengyo-06 {
  position: absolute;
  left: 128px;
  top: 116px;
}
.kengyo-07 {
  position: absolute;
  left: 173px;
  top: 88px;
}
.kengyo-08 {
  position: absolute;
  left: 385px;
  top: 116px;
}
.kengyo-09 {
  position: absolute;
  left: 412px;
  top: 88px;
}
.kengyo-10 {
  position: absolute;
  left: 642px;
  top: 116px;
}
.kengyo-11 {
  position: absolute;
  left: 700px;
  top: 88px;
}
.btn-07-kengyo1 {
  position: absolute;
  left: 165px;
  top: 334px;
}
.btn-07-kengyo2 {
  position: absolute;
  left: 422px;
  top: 334px;
}
.btn-07-kengyo3 {
  position: absolute;
  left: 679px;
  top: 334px;
}

/* しごとコンビニ */
.shigoto {
  width: 100%;
  height: 1610px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_04.png") no-repeat calc(50% - 399px) 90px;
  background-color: #fcf9f2;
}
.shigoto > .inner{
  width: 1100px;
  height: 1610px;
  position: relative;
  margin: 0px auto;
}
.shigoto-02 {
  position: absolute;
  left: 494px;
  top: 201px;
}
.shigoto-03 {
  position: absolute;
  left: 102px;
  top: 126px;
}
.shigoto-04 {
  position: absolute;
  left: 104px;
  top: 274px;
}
.shigoto-04b {
  position: absolute;
  left: 104px;
  top: 393px;
  width: 320px;
  text-align: justify;
}
.btn-06-shigoto {
  position: absolute;
  left: 104px;
  top: 594px;
}
.shigoto-05 {
  position: absolute;
  left: 50px;
  top: 740px;
}

/* 起業型・新規事業型地域おこし協力隊 */
.revitalization {
  width: 100%;
  height: 1320px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_02.png") no-repeat calc(50% + 354px) 390px;
  background-color: #fcf9f2;
}
.revitalization > .inner{
  width: 1100px;
  height: 1320px;
  position: relative;
  margin: 0px auto;
}
.revitalization-02 {
  position: absolute;
  left: 64px;
  top: 202px;
}
.revitalization-03 {
  position: absolute;
  left: 663px;
  top: 202px;
}
.revitalization-03b {
  position: absolute;
  left: 663px;
  top: 320px;
  width: 320px;
  text-align: justify;
}
.btn-06-revitalization {
  position: absolute;
  left: 663px;
  top: 492px;
}
.revitalization-04 {
  position: absolute;
  left: 110px;
  top: 767px;
}

/* 新規事業創出 */
.business {
  width: 100%;
  height: 660px;
  min-width: 1100px;
  padding-top: 70px;
  background:
  url("../images/bg_cnt_01.png") no-repeat calc(50% - 375px) 10px;
  background-color: #fcf9f2;
}
.business > .inner{
  width: 1100px;
  height: 660px;
  position: relative;
  margin: 0px auto;
}
.business-02 {
  position: absolute;
  left: 538px;
  top: 204px;
}
.business-03 {
  position: absolute;
  left: 80px;
  top: 415px;
}
.business-04 {
  position: absolute;
  left: 102px;
  top: 233px;
}
.business-04b {
  position: absolute;
  left: 102px;
  top: 294px;
  width: 375px;
  text-align: justify;
}
.btn-06-business {
  position: absolute;
  left: 255px;
  top: 480px;
}

/* 新規事業創出＋ */
.business-plus {
  width: 100%;
  height: 600px;
  min-width: 1100px;
  padding-top: 70px;
  background-color: #fcf9f2;
}
.business-plus > .inner{
  width: 1100px;
  height: 600px;
  position: relative;
  margin: 0px auto;
}
.business-05 {
  position: relative;
  width: 1100px;
  height: 434px;
  background:
  url("../images/pc_business_05.png") no-repeat center top;
}
.business-06 {
  position: absolute;
  left: 63px;
  top: 103px;
}
.business-07 {
  position: absolute;
  left: 311px;
  top: 103px;
}
.business-08 {
  position: absolute;
  left: 559px;
  top: 103px;
}
.business-09 {
  position: absolute;
  left: 807px;
  top: 103px;
}
.business-06b {
  position: absolute;
  left: 63px;
  top: 300px;
  width: 230px;
  font-size: 15px;
  line-height: 1.6;
}
.business-07b {
  position: absolute;
  left: 311px;
  top: 300px;
  width: 230px;
  font-size: 15px;
  line-height: 1.6;
}
.business-08b {
  position: absolute;
  left: 559px;
  top: 300px;
  width: 230px;
  font-size: 15px;
  line-height: 1.6;
}
.business-09b {
  position: absolute;
  left: 807px;
  top: 300px;
  width: 230px;
  font-size: 15px;
  line-height: 1.6;
}
.btn-07-business1 {
  position: absolute;
  left: 100px;
  top: 368px;
}
.btn-07-business2 {
  position: absolute;
  left: 348px;
  top: 368px;
}
.btn-07-business3 {
  position: absolute;
  left: 596px;
  top: 368px;
}
.btn-07-business4 {
  position: absolute;
  left: 844px;
  top: 368px;
}

/* 株式会社SMO南小国について */
.business2 {
  width: 100%;
  height: 755px;
  min-width: 1100px;
  background:
  url("../images/pc_bg_wave.png") repeat-x center top;
  background-color: #c4e0e8;
}
.business2 > .inner{
  width: 1100px;
  height: 755px;
  position: relative;
  margin: 0px auto;
}
.business-10 {
  position: absolute;
  left: 485px;
  top: 150px;
}
.business-10a {
  position: absolute;
  left: 485px;
  top: 220px;
  width: 530px;
  font-size: 18px;
  text-align: justify;
}
.business-10b {
  position: absolute;
  left: 485px;
  top: 316px;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
  color: #8ac1d2;
  width: 530px;
  height: 90px;
  padding-left: 18px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.business-10c {
  position: absolute;
  left: 485px;
  top: 427px;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
  color: #8ac1d2;
  width: 530px;
  height: 90px;
  padding-left: 18px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.business-10d {
  position: absolute;
  left: 485px;
  top: 547px;
  width: 530px;
  font-size: 18px;
  text-align: justify;
}
.business-11 {
  position: absolute;
  left: 51px;
  top: 144px;
}

/* フッタ */
.footer {
  width: 100%;
  height: 290px;
  min-width: 1000px;
  background-color: #8ac1d2;
}
.footer > .inner{
  width: 1000px;
  height: 290px;
  position: relative;
  margin: 0px auto;
}
.contact {
  position: absolute;
  left: 50px;
  top: 60px;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  color: #fff;
  z-index: 2;
}
.contact a {
  color: #fff;
  text-decoration: none;
}
.contact a:hover {
  color: #fff;
  text-decoration: underline;
}
.contact-st {
  margin-bottom: 10px;
  letter-spacing: .2em;
}
.contact-tel {
  margin-top: 10px;
}
.btn-08 {
  position: absolute;
  left: 450px;
  top: 172px;
  z-index: 2;
}
.btn-09 {
  position: absolute;
  left: 50px;
  top: 176px;
}
.followus {
  position: absolute;
  left: 450px;
  top: 60px;
  line-height: 0;
}
.sns-wrap {
  width: 280px;
  position: absolute;
  left: 450px;
  top: 107px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.footer-logo {
  position: absolute;
  left: 281px;
  top: 57px;
}

}

/* ================================
    SP用CSS
================================ */

@media (max-width:767px) {

img { 
  max-width: 100%;
}

.about {
  width: 100%;
  padding-bottom: 10%;
  background-color: #8ac1d2;
}
#slider {
  width: 100%;
  height: auto;
  position: relative;
  aspect-ratio: 7 / 7.68;
}
.titlecopy {
  width: 100%;
}
.about-01 {
  width: 87%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -3%;
  position: relative;
}
.about-02 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}
.about-03 {
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  font-size: clamp(1.125rem, 0.527rem + 2.55vw, 1.75rem);
  color: #fff;
  text-align: justify;
}
.btn-01 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}

/* 来訪者からの声 */
.voice {
  width: 100%;
  padding-top: 10%;
  background:
  url("../images/sp_bg_voice_01.png") no-repeat center top;
  background-color: #fcf9f2;
}
.voice-01 {
  width: 69%;
  margin-left: auto;
  margin-right: auto;
}
.voice-01b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  margin-top: 5%;
}
.voice-02 {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.voice-03 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

/* 人材還流事業をはじめた理由 */
.mind {
  width: 100%;
  padding-top: 15%;
  padding-bottom: 10%;
  background:
  url("../images/sp_bg_voice_02.png") no-repeat center top;
  background-color: #fcf9f2;
}
.mind-01 {
  width: 73%;
  margin-left: auto;
  margin-right: auto;
}
.mind-02 {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  font-weight: bold;
  color: #fff;
  width: 100%;
  background-color: #ef9440;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-top: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mind-03 {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 83%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
  text-align: justify;
}
.text-orange {
  color: #ef9440;
}

/* 南小国町人材還流事業のスキーム */
.scheme {
  width: 100%;
  padding-bottom: 10%;
  background:
  url("../images/sp_bg_scheme_01.png") no-repeat center 64%;
  background-color: #f3f9fa;
}
.scheme-01 {
  width: 100%;
}
.scheme-02 {
  width: 92%;
  aspect-ratio: 71 / 117;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
  background:
  url("../images/sp_scheme_02.png") no-repeat center top;
  background-size: contain;
}
.scheme-03 {
  width: 28%;
  position: absolute;
  left: 9.7%;
  top: 11.2%;
}
.scheme-04 {
  width: 89%;
  position: absolute;
  left: 9.7%;
  top: 19.4%;
}
.scheme-05 {
  width: 28%;
  position: absolute;
  left: 71%;
  top: 27.6%;
}
.scheme-06 {
  width: 28%;
  position: absolute;
  left: 71%;
  top: 35.8%;
}
.scheme-07 {
  width: 28%;
  position: absolute;
  left: 71%;
  top: 44.1%;
}
.scheme-08 {
  width: 89%;
  position: absolute;
  left: 9.7%;
  top: 55.7%;
}
.scheme-09 {
  width: 89%;
  position: absolute;
  left: 9.7%;
  top: 65%;
}
.scheme-10 {
  width: 28%;
  position: absolute;
  left: 9.7%;
  top: 74.4%;
}

/* loop */
.loopbox {
  overflow: hidden;
  padding-bottom: 10%;
  background-color: #f3f9fa;
}
.loop_wrap {
  display: flex;
  width: 100vw;
  height: 200px;
}
.loop_wrap img {
  width: auto;
  height: 100%;
  max-inline-size: 2160px;
}

/* 企業版ふるさと納税 */
.tax {
  width: 100%;
  padding-top: 10%;
  background:
  url("../images/sp_bg_tax.png") no-repeat center top;
  background-color: #fcf9f2;
}
.tax-01 {
  width: 59%;
  margin-left: auto;
  margin-right: auto;
}
.tax-02 {
  width: 76%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.tax-03 {
  width: 78%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}
.tax-03b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.tax-04 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8%;
}
.btn-02 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}
.btn-03 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5%;
}

/* 視察・研修 */
.inspection {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_inspection.png") no-repeat center top;
  background-color: #fcf9f2;
}
.inspection-01 {
  width: 68%;
  margin-left: auto;
  margin-right: auto;
}
.inspection-02 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.inspection-03 {
  width: 62%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}
.inspection-03b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-04 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}
.btn-05 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5%;
}

/* 移住ツアー */
.tour {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_tour.png") no-repeat center top;
  background-color: #fcf9f2;
}
.tour-01 {
  width: 43%;
  margin-left: auto;
  margin-right: auto;
}
.tour-02 {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.tour-03 {
  width: 58%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}
.tour-03b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-06-tour {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}

/* インターンシップ */
.internship {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_internship.png") no-repeat center top;
  background-color: #fcf9f2;
}
.internship-01 {
  width: 47%;
  margin-left: auto;
  margin-right: auto;
}
.internship-02 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.internship-03 {
  width: 51%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}
.internship-03b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-06-internship {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}

/* ふるさと兼業 */
.kengyo {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_kengyo.png") no-repeat center top;
  background-color: #fcf9f2;
}
.kengyo-01 {
  width: 43%;
  margin-left: auto;
  margin-right: auto;
}
.kengyo-02 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.kengyo-03 {
  width: 39%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}
.kengyo-04 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}
.kengyo-04b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-06-kengyo {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}

/* ふるさと兼業＋ */
.kengyo-plus {
  width: 100%;
  padding-top: 10%;
  background-color: #fcf9f2;
}
.kengyo-05 {
  width: 100%;
  aspect-ratio: 24 / 35;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  position: relative;
  background:
  url("../images/sp_kengyo_05.png") no-repeat center top;
  background-size: contain;
}
.kengyo-06 {
  width: 44%;
  position: absolute;
  left: 6%;
  top: 14.5%;
}
.kengyo-07 {
  width: 40%;
  position: absolute;
  left: 54.3%;
  top: 17%;
}
.kengyo-08 {
  width: 44%;
  position: absolute;
  left: 6%;
  top: 42.1%;
}
.kengyo-09 {
  width: 28%;
  position: absolute;
  left: 54.3%;
  top: 43.3%;
}
.kengyo-10 {
  width: 44%;
  position: absolute;
  left: 6%;
  top: 70%;
}
.kengyo-11 {
  width: 33%;
  position: absolute;
  left: 54.3%;
  top: 72.5%;
}
.btn-07-kengyo1 {
  width: 39%;
  position: absolute;
  left: 54.3%;
  top: 27.8%;
}
.btn-07-kengyo2 {
  width: 39%;
  position: absolute;
  left: 54.3%;
  top: 55.5%;
}
.btn-07-kengyo3 {
  width: 39%;
  position: absolute;
  left: 54.3%;
  top: 83.3%;
}

/* しごとコンビニ */
.shigoto {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_shigoto.png") no-repeat center top;
  background-color: #fcf9f2;
}
.shigoto-01 {
  width: 68%;
  margin-left: auto;
  margin-right: auto;
}
.shigoto-02 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.shigoto-03 {
  width: 42%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}
.shigoto-04 {
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}
.shigoto-04b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-06-shigoto {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}
.shigoto-05 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

/* 起業型・新規事業型地域おこし協力隊 */
.revitalization {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_revitalization.png") no-repeat center top;
  background-color: #fcf9f2;
}
.revitalization-01 {
  width: 88%;
  margin-left: auto;
  margin-right: auto;
}
.revitalization-02 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.revitalization-03 {
  width: 67%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}
.revitalization-03b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-06-revitalization {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}
.revitalization-04 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

/* 新規事業創出 */
.business {
  width: 100%;
  padding-top: 15%;
  background:
  url("../images/sp_bg_business.png") no-repeat center top;
  background-color: #fcf9f2;
}
.business-01 {
  width: 43%;
  margin-left: auto;
  margin-right: auto;
}
.business-02 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.business-03 {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.6%;
}
.business-04 {
  width: 58%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
}
.business-04b {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  text-align: justify;
}
.btn-06-business {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7%;
}

/* 新規事業創出＋ */
.business-plus {
  width: 100%;
  padding-top: 10%;
  background-color: #fcf9f2;
}
.business-05 {
  width: 100%;
  aspect-ratio: 384 / 545;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  position: relative;
  background:
  url("../images/sp_business_05.png") no-repeat center top;
  background-size: contain;
}
.business-06 {
  width: 42%;
  position: absolute;
  left: 4%;
  top: 10.7%;
}
.business-07 {
  width: 42%;
  position: absolute;
  left: 53.6%;
  top: 10.7%;
}
.business-08 {
  width: 42%;
  position: absolute;
  left: 4%;
  top: 55.6%;
}
.business-09 {
  width: 42%;
  position: absolute;
  left: 53.6%;
  top: 55.6%;
}
.business-06b {
  width: 20%;
  position: absolute;
  left: 4%;
  top: 32.8%;
}
.business-07b {
  width: 38%;
  position: absolute;
  left: 53.6%;
  top: 32.8%;
}
.business-08b {
  width: 44%;
  position: absolute;
  left: 4%;
  top: 77.7%;
}
.business-09b {
  width: 37%;
  position: absolute;
  left: 53.6%;
  top: 77.7%;
}
.btn-07-business1 {
  width: 33%;
  position: absolute;
  left: 4%;
  top: 44.9%;
}
.btn-07-business2 {
  width: 33%;
  position: absolute;
  left: 53.6%;
  top: 44.9%;
}
.btn-07-business3 {
  width: 33%;
  position: absolute;
  left: 4%;
  top: 86.4%;
}
.btn-07-business4 {
  width: 33%;
  position: absolute;
  left: 53.6%;
  top: 86.4%;
}

/* 株式会社SMO南小国について */
.business2 {
  width: 100%;
  padding-top: 15%;
  padding-bottom: 10%;
  background:
  url("../images/sp_bg_wave.png") repeat-x center top;
  background-color: #c4e0e8;
}
.business-10 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}
.business-10a {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7%;
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  text-align: justify;
}
.business-10b {
  width: 75%;
  height: 6em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
  color: #8ac1d2;
  padding-left: 1em;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.business-10c {
  width: 75%;
  height: 6em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
  color: #8ac1d2;
  padding-left: 1em;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.business-10d {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  text-align: justify;
}
.business-11 {
  width: 89%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}

/* フッタ */
.footer {
  width: 100%;
  background-color: #8ac1d2;
  padding-top: 5%;
  padding-bottom: 5%;
}
.contact {
  font-size: clamp(1rem, 0.522rem + 2.04vw, 1.5rem);
  line-height: 1.6;
  color: #fff;
  z-index: 2;
}
.contact a {
  color: #fff;
  text-decoration: none;
}
.contact a:hover {
  color: #fff;
  text-decoration: underline;
}
.contact-st {
  margin-bottom: 3%;
  letter-spacing: .2em;
}
.contact-tel {
  margin-top: 3%;
}
.btn-08 {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}
.followus {
  width: 23%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}
.sns-wrap {
  width: 52%;
  margin: 5% auto 10%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.note {
  width: 29.3%;
}
.facebook {
  width: 12.6%;
}
.instagram {
  width: 12.6%;
}
.youtube {
  width: 18%;
}
.footer-logo {
  width: 86%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
}

#top {
	width: 60px;
}

}