@charset "utf-8";
/* CSS Document */

.miyakojima #body,
.miyakojima #copyR{
  min-width: auto;
}
.miyakojima #body{
overflow-x:hidden;
}
* {  
  box-sizing: border-box;
}

/* パンくず */
.miyakojima .breadcrumb {
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto 80px;
}
.miyakojima.pageMap .breadcrumb {
  margin: 100px auto 80px;
}
.miyakojima .breadcrumb ul {
  display: flex;
  gap: 20px;
  color: #00C8D7;
  font-family: "ZenMaruGothic-Medium";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.miyakojima .breadcrumb ul li a {
  position: relative;
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media screen and (max-width:767px) {
  .miyakojima .breadcrumb {
    margin-bottom: 60px;
  }
  .miyakojima.pageMap .wrapper {
    padding-top: 0;
  }
  .miyakojima.pageMap .breadcrumb {
    margin: 70px auto 0;
  }
  .miyakojima .breadcrumb ul {
    font-size: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .miyakojima .breadcrumb ul li {
    white-space: nowrap;
  }
  .miyakojima .breadcrumb ul li a {    
    font-size: 14px;
    display: flex;
    gap: 5px;
  }
}
.miyakojima .breadcrumb ul li a:after {
  content: ">";
}

/* miyakojima top */
.miyakojima .paddingArea {
  padding: 0 14.5px;
}
.miyakojima .topImg {
  width: 100%;
  max-width: 1366px;
  margin: 82px auto 20px;
}
.miyakojima.top .topImg {
  margin: 82px auto 80px;
}
.miyakojima .titleA {
  color: var(--Charge-mo, #00C8D7);
  text-align: left;
  font-family: "ZenMaruGothic-Medium";
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 22px;
}
.miyakojima .titleA br {
  display: none;
}
.miyakojima .titleB {
  color:#3B4746;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 22px;
}
.miyakojima .topRead {
  margin: 40px 0 80px auto;
  font-weight: bold;
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 178%;
  text-align: left;
  /* max-width: 832px; */
}
.miyakojima .wrap {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.miyakojima .wrap .picture {
  /* max-width: 820px; */
  display: block;
}
.miyakojima #reason .picture {
  max-width: 820px;
  display: block;
  margin: 0 auto;
}
.miyakojima #reason p {
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 36px; /* 200% */
  margin-bottom: 16px;
}
.miyakojima .btnWrap {
  margin-bottom: 100px;
}
.miyakojima .wrap.proposal .btnWrap {
  margin-bottom: 60px;
}
.miyakojima .btnDetail {
  border-radius: 10px;
  border: 2px solid var(--Charge-mo, #00C8D7);
  display: flex;
  max-width: 643px;
  width: 100%;
  padding: 10px 30px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--Charge-mo, #00C8D7);
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.miyakojima .btnDetail:after {
  content: url(/lib/images/miyakojima/ico_blank.png);
}
.miyakojima .titleI {
  color: #000;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 22px;
}

/* news */
.miyakojima .newsWrap {
	margin-bottom: 50px;
}
.miyakojima .newsListWrap {
	border: 2px solid #00C8D7;
	background: #FFF;
	display: flex;
	max-width: 1000px;
	padding: 20px 30px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.miyakojima .newsListWrap ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.miyakojima .newsListWrap ul li {
	display: flex;
	justify-content: flex-start;
	gap: 40px;
}
/* topics */
.miyakojima .topicsWrap {
	margin-bottom: 120px;
}
.miyakojima .topicsListWrap ul {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.miyakojima .topicsListWrap ul li {
	width: calc(100% / 3 - 40px);
}
.miyakojima .proposal .btnWrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* project */
.miyakojima .bgProject {
	background: #F2F5F6;
	display: flex;
	padding: 60px 0 80px 0;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	align-self: stretch;
	width: 100dvw;
	margin: 0 calc(50% - 50dvw);
}
/* loadmap */
.miyakojima .bgLoadMap {
	background: #00C8D7;
	display: flex;
	padding: 60px 0 80px 0;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	align-self: stretch;
	width: 100dvw;
	margin: 0 calc(50% - 50dvw);
}
.btnMigration {
  margin-bottom: 80px;
}
.btnMigration ul {
  max-width: 770px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}
.btnMigration ul li {  
  width: 100%;
  max-width: 360px;
}
@media screen and (max-width:767px) {
  .btnMigration ul li {
    display: flex;
    justify-content: center;
  }
}
.btnMigration a {
  display: flex;
  height: 72px;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  background: var(--Charge-mo, #00C8D7);
  color: #FFF;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 128.571% */
}

/* 充電場所 */
.miyakojima .chargePlacesFlexWrap {
  background: #00C8D7;
  padding: 50px 0;
}
.miyakojima .chargePlacesFlex {
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.miyakojima .chargePlacesTtl {
  color: #FFF;
  font-family: "ZenMaruGothic-Medium";
  font-size: 48px;
  font-weight: 500;
  line-height: 100%;
}
.miyakojima .btnChargePlaces a {
  border-radius: 60px;
  background: #FCBA19;
  width: 600px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-family: "ZenMaruGothic-Medium";
  font-size: 36px;
  font-weight: 500;
  line-height: 100%;
  position: relative;
  gap: 20px;
}	
.miyakojima .btnChargePlaces a:before {
  content: url(/lib/images/miyakojima/icon_gasoline.png);
}
@media screen and (min-width:767px) and (max-width:970px) {
  .miyakojima .chargePlacesTtl {
    font-size: 28px;
  }
  .miyakojima .btnChargePlaces a {
    width: 490px;
    font-size: 26px;
  }
}


/* service */
.titleC {
  color: var(--Charge-mo, #00C8D7);
  text-align: left;
  font-family: "ZenMaruGothic-Medium";
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 68px;
}
.howToUse {
  margin-bottom: 80px;
}
.howToUse ul {
  display: flex;
  justify-content: space-around;
}
.step ol {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.step ol li .flex figure + div {
  flex-direction: column;
  display: flex;
}
.step ol li .flex figure + div .btnWrap {
  justify-content: flex-start;
  display: flex;
  gap: 20px;
}
.titleE {
  display: flex;
  gap: 18px;
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 30px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 25px;
}
.titleE span.stepLabel {
  border-radius: 100px;
  background: #00C8D7;
  display: inline-flex;
  padding: 0 24px;
  justify-content: center;
  align-items: center;
  gap: 5px;

  color: #F2F5F6;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.titleE span.num {
  display: inline-block;
  margin-top: -5px;
  color: var(--Charge-mo, #F2F5F6);
  font-family: "ZenMaruGothic-Medium";
  font-size: 34px;
  font-weight: 700;
  line-height: normal;
} 

.threePoint {
  margin-bottom: 80px;
}
.threePoint ul {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.threePoint ul li {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
  border-radius: 10px;
  border: 3px solid #00C8D7;
  padding: 24px 16px;
  align-items: center;
}
.threePoint ul li figure {
  width: 160px;
}
.threePoint .titleD + div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.threePoint p {
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
}
.threePoint p.right {
  margin-left: auto;
}
.threePoint p.right a {
  color: #3B4746;
  text-decoration: underline;
}
.threePoint figure + div {
  display: flex;
  flex-direction: column;
}
.step {
  margin-bottom: 80px;
}
.step ol {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.step ol li .flex {
  gap: 30px;
}
.step ol li .flex figure {
  width: 290px;
}
.step ol li .flex img {
  border-radius: 8px;
}
.step ol li .flex p {
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 200% */
  flex: 1;
}
.btnWrap:has(.btnEntry) {
  text-align: center;
  margin-bottom: 0;
}
.btnEntry {
  border-radius: 10px;
  border: 2px solid #00C8D7;
  display: inline-flex;
  padding: 10px 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #00C8D7;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.titleD {
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 5px;
}
.threePoint .titleD {
  text-align: center;
}
#reason {
  margin-bottom: 80px;
}
.miyakojima.top #reason {
  background: #F2F5F6;
  padding: 60px 14.5px 80px;
  width: 100dvw;
  margin: 0 calc(50% - 50vw);
}
@media screen and (max-width:767px) {
.miyakojima.top #reason .wrap {
  padding: 0 10px;
}
}
.miyakojima.top #reason p {
  font-family: "Hiragino Kaku Gothic ProN";
  }
.miyakojima.top #reason p b {
  color: #3B4746;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}
.reasonList ul {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.reasonList ul li .flex {
  gap: 30px;
  align-items: center;
}
.reasonList ul li .flex p {
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 200% */
}
.miyakojima.top #reason .picture {
  margin-bottom: 40px;
}

#fees {
  margin-bottom: 80px;
}
.feesTable table {
  width: 540px;
  margin: 0 auto;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
}
.feesTable table tr:nth-child(odd) {
  background: rgba(0, 200, 215, 0.20);
}
.feesTable table tr:nth-child(even) {
  background: rgba(0, 200, 215, 0.10);
}
.feesTable table tr th,
.feesTable table tr td {
  border: none;
  
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-weight: 500;
  text-align: left;
  padding: 10px 28px;
  line-height: normal;
}
.feesTable table tr th {
  font-size: 22px;
  width: 240px;
}
.feesTable table tr td {
  font-size: 20px;
}
.feesTable table tr td span {
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
}

/* キャンペーン */
.titleF {
  color: var(--Charge-mo, #00C8D7);
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 22px;
}
.titleF br {
  display: none;
}
.topLead {
  color: #3B4746;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 200% */
  margin-bottom: 40px;
}
.campaignList ul {
  display: flex;
  justify-content: center;
  gap: 60px;
}
@media screen and (min-width:768px) and (max-width:970px) {
  .campaignList ul {
    gap: 20px;
  }
}
.campaignList ul li p {
  width: 230px;
  height: 230px;
  aspect-ratio: 1/1;
  border: 3px solid #00C8D7;
  border-radius: 100vmax;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  color: #00C8D7;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px; /* 150% */
}
.campaignTable table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 60px;
}
.campaignTable table tr th br {
  display: none;
}
.campaignTable table tr th,
.campaignTable table tr td {
  color: #3B4746;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px; /* 150% */
}
.campaignTable table tr th,
.campaignTable table tr td {
  border: 1px solid #ACB9BE;
}
.campaignTable table tr:first-child th {
  border: none;
  padding: 0;
  background: #fff;
}
.campaignTable table tr th.merit span,
.campaignTable table tr th.normal span {
  padding: 33px 0;
}
.campaignTable table tr th.merit span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background: #00C8D7;
  border: 1px solid #00C8D7;
  border-bottom: none;
  color: #FFF;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 108.333% */
}
.campaignTable table tr th.normal span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px 8px 0 0;
  border: 1px solid #ACB9BE;
  border-bottom: none;
  background: var(--Charge-mo, #F2F5F6);
  color: #3B4746;
  text-align: center;
  font-family: "ZenMaruGothic-Medium";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 108.333% */
  width: calc(100% - 2px);
}
.campaignTable table tr:not(first-child) th {
  color: #3B4746;
  font-family: "ZenMaruGothic-Medium";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px; /* 200% */
  padding: 32px 0;
  background: #F2F5F6;
}
.campaignTable table tr:not(first-child) td b {
font-size: 48px;
}
.campaignTable table tr:not(first-child) td span {
  color: var(--Charge-mo, #00C8D7);
font-family: "ZenMaruGothic-Medium";
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 36px;
}
.campaignTable table tr:not(first-child) td span.fontSize {
  font-size: 32px;
}
.campaignTable table tr td span.tax {
  color: #3B4746!important;
  font-family: "ZenMaruGothic-Medium";
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
}

.campaignTable caption {
  caption-side: bottom;
  text-align: left;
  margin-top: 22px;
}
.duration {
  background: #00C8D7;
  padding: 28px 0;
  margin-bottom: 60px;
}
.titleG {  
  color: #FFF;
text-align: center;
font-family: "ZenMaruGothic-Medium";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 112.5% */
margin-bottom: 20px;
}

.duration p {
color: #FFF;
text-align: center;
font-family: "ZenMaruGothic-Medium";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 90% */
}
@media screen and (min-width:768px) and (max-width:970px) {
  .duration p {
    font-size: 30px;
  }
}
.btnRegistrationWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.btnRegistration {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 110px;
  border-radius: 60px;
  border: 3px solid var(--Charge-mo, #00C8D7);
  background: #FFF;
  color: var(--Charge-mo, #00C8D7);
  font-family: "ZenMaruGothic-Medium";
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 100% */
  margin: 0 auto 40px;
}
.btnRegistrationWrap p {
  color: #3B4746;
  text-align: left;
  font-family: "Zen Maru Gothic";
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}


/* マップ */
.wrapper {
  width: 100%;
  max-width: 1366px;
  margin: 82px auto 0;
  overflow-x: hidden;
}
.titleH {
  color: var(--Charge-mo, #00C8D7);
text-align: center;
font-family: "ZenMaruGothic-Medium";
font-size: 36px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 40px;
}
.mapArea {
  position: relative;
}
.map {
  background: #D9D9D9;
  width: 100%;
  position: relative;
}
.map img {
  max-width: 100%;
}
.map .pin1,
.map .pin2,
.map .pin3,
.map .pin4,
.map .pin5,
.map .pin6,
.map .pin7,
.map .pin8 {
  position: absolute;
  width: clamp(22px, 5.6dvw, 60px);
}
.map .pin1 { top: 8%; left: 42%;}
.map .pin2 { top: 49%; left: 54%;}
.map .pin3 { top: 58%; left: 48%;}
.map .pin4 { top: 76%; left: 29%;}
.map .pin5 { top: 81%; left: 57%;}
.map .pin6 { top: 83%; left: 87%;}
.map .pin7 { top: 68%; left: 39.5%;}
.map .pin8 { top: 48%; left: 38%;}
.mapArea .btnWrap:has(.btnContact) {
  background: rgba(225, 229, 230, 0.70);
  width: 100dvw;
  height: 142px;
  margin: 0 calc(50% - 50dvw);
  position: absolute;
  bottom: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnContact {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 500px;
  height: 100px;
  border-radius: 10px;
  background: #FCBA19;
  color: #FFF;
  font-family: "ZenMaruGothic-Medium";
  font-size: min(22px, 2.2vw);
  white-space: nowrap;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 100% */
}
.btnContact:before {
  content: url(/lib/images/mailIcon.png);
}


/* フッター */
footer {
  background: #F2F5F6;
  padding: 30px 100px;
}
.footerWrap {
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
}
.footerFlexWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6vw;
}
.footerContentsList a,
.footerLink ul li a {
  font-family: "ZenMaruGothic-Medium";
  color: #3B4746;
}
.footerContentsList dl {
}
.footerContentsList dl dt {
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 16px;
}
.footerContentsList dl dd {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 118%;
  margin-bottom: 12px;
}
.footerLink {
  position: relative;
  padding-left: 40px;
}
.footerLink:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 1px;
  background: #231815;
}
.footerLink ul li {
  color: #3B4746;
  font-family: "Hiragino Kaku Gothic ProN";
  font-size: 19px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 12px;
}

/* general */
.miyakojima .mb40 {
  margin-bottom: 40px!important;
}
.flex {
  display: flex;
}
a {
  transition: .2s;
}
a:hover {
  opacity: .5;
}








@media screen and (max-width: 767px) {
  .miyakojima.top .topImg {
    margin: 56px auto 60px;
  }
  .miyakojima .titleA {
    font-size: 30px;
  }
  .miyakojima .titleA br {
    display: block;
  }
  .miyakojima .topRead {
    margin: 22px 0 40px;
    font-size: 14px;
  }
  .miyakojima .btnWrap {
    margin-bottom: 80px;
  }
  .miyakojima .btnDetail {
    font-size: 16px;
    width: 100%;
  }
  .miyakojima .titleB {
    font-size: 30px;
  }
  .miyakojima #reason p {
    color: #000;
    font-family: "Hiragino Kaku Gothic ProN";
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 36px; /* 200% */
    margin-bottom: 16px;
  }
  .miyakojima .chargePlacesFlexWrap {
    padding: 24px 20px 28px;
  }
  .miyakojima .chargePlacesFlex {
    flex-direction: column;
    gap: 20px;
  }
  .miyakojima .chargePlacesTtl {
    font-size: 30px;
  }
  .miyakojima .btnChargePlaces a {
    width: 330px;
    height: 62px;
    font-size: 24px;
  }
  .miyakojima .btnChargePlaces a:before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 34px;
    background: url(/lib/images/miyakojima/icon_gasoline.png) center center no-repeat;
    background-size: cover;
  }
  .btnMigration ul  {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
  }
  .btnMigration ul li a {
    width: 320px;
    height: 56px;
    color: #FFF;
    text-align: center;
    font-family: "Zen Maru Gothic";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px; /* 200% */
  }

  /* service */
  .titleC {
    font-size: 30px;
    text-align: center;
    margin-bottom: 40px;
  }
  .howToUse ul {
    flex-wrap: wrap;
  }
  .howToUse ul li:first-child {
    width: 100%;
    text-align: center
  }
  .howToUse ul li img {
    max-width: 170px;
  }
  .titleE {
    font-size: 24px;
    gap: 6px;
  }
  .titleE span.stepLabel {
    padding: 0 10px;
  }
  .titleE span.stepLabel,
  .titleE span.num {
    font-size: 16px;
  }
  .step ol li .flex{
    flex-direction: column;
    gap: 20px;
  }
  .step ol li .flex p {
    font-size: 16px;
    line-height: 26px;
  }
  .step ol li .flex p span {
    font-size: 12px;
  }
  .step ol li .flex figure {
    width: auto;
  }

  .reasonList ul li .flex figure {
    width: 100px;
  }
  .reasonList ul li .flex figure + div {
    flex: 1;
  }
  .titleD {
    color: #3B4746;
    font-family: "ZenMaruGothic-Medium";
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin-bottom: 8px;
  }
  .miyakojima #reason .reasonList p {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 22px;
  }
  .reasonList ul li .flex {
    gap: 16px;
  }
  .feesTable table {
    width: 100%;
  }  
  .feesTable table tr th {
    font-size: 16px;
    width: 190px;
  }
  .feesTable table tr td {
    font-size: 16px;
  }
  .feesTable table tr th,
  .feesTable table tr td {
    padding: 10px 18px;
  }

  /* サービス */
  .threePoint {
    width: 100%;
  }
  .threePoint ul {
    flex-direction: column;
    width: 100%;
    gap: 20px;
  }
  .threePoint ul li {
    width: 100%;
    flex-direction: row;
    padding: 16px;
  }
  .threePoint ul li .titleD {
    font-size: 18px;
  }
  .threePoint ul li figure {
    width: 100px;
  }
  .threePoint figure + div {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    flex: 1;
  }
  .threePoint figure + div p {
    font-size: 14px;
    line-height: 22px;
  }
  .step ol li .flex figure + div p {
    margin-bottom: 20px;
  }
  .step ol li .flex figure + div .btnWrap {
    flex-direction: column;
  }

  /* マップ */
  .wrapper {
    padding-top: 60px;
    margin: 56px auto 40px;
  }
  .titleH {
    font-size: 30px;
    margin-bottom: 0;
  }


  /* キャンペーン */
  .titleF {
    font-size: 30px;
  }
  .titleF br {
    display: block;
  }
  .topLead {
    font-size: 16px;
  }
  .campaignList {
    margin-bottom: 41px;
  }
.campaignList ul {
  flex-wrap: wrap;
          gap: 0 40px;
}
.campaignList ul li {
  width: 150px;
}
.campaignList ul li:first-child {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.campaignList ul li p {
  width: 150px;
  height: 150px;
  margin-bottom: 0px;
  font-size: 20px;
  line-height: 32px; /* 150% */
}
.campaignTable table {
  margin-bottom: 20px;
}
.campaignTable table tr th br {
  display: block;
}
.campaignTable table tr th.merit span,
.campaignTable table tr th.normal span {
  font-size: 18px;
  padding: 0;
  height: 92px;
}
.campaignTable table tr:not(first-child) th {
  font-size: 14px;
  line-height: 22px;
}
.campaignTable table tr th, .campaignTable table tr td {
  font-size: 16px;
} 
.campaignTable caption {
  font-size: 11px;
}
.titleG {
  font-size: 24px;
  margin-bottom: 12px;
}
.duration p {
  font-size: 26px;
}
.duration {
  width: 100dvw;
  margin: 0 calc(50% - 50dvw);
  margin-bottom: 40px;
}
.btnRegistration {
  width: 94%;
height: 62px;
color: var(--Charge-mo, #00C8D7);
font-size: 24px;
margin: 0 auto;
}
.campaignTable table tr:not(first-child) td b {
font-size: 40px;
}
.campaignTable table tr:not(first-child) td span.fontSize {
  font-size: 24px;
}


  footer {
    padding: 30px 40px;
  }
  .footerWrap {
    flex-direction: column;
    gap: 26px;
  }
  .footerFlexWrap {
    gap: unset;
    padding: 0 15px;
  }
  .footerContentsList a {
    white-space: nowrap;
  }
  .footerContentsList dl dt {
    font-size: 16px;
  }
  .footerContentsList dl dd {
    font-size: 14px;
  }
  .footerContentsList dl dd:last-child {
    margin-bottom: 0;
  } 
  .footerLink {
    padding: 26px 20px;
  }
  .footerLink:before {
    width: 100%;
    height: 1px;
  }
  .footerLink ul li {
    font-size: 16px;
  }
  .miyakojima .topImg {
    margin: 56px auto 20px;
  }
  
}