@charset "utf-8";
/**************************************************
Top Page Only
**************************************************/
/* mainimg --------------- */

#mainimg {
width:100%;
margin-bottom:50px;
float:left;
position:relative;
}

#mainimg img {
width:auto;
max-width:100%;
height:auto;
}

#mainimg .text {
line-height:60px;
padding:30px 50px;
background:rgba(237,94,60,0.95);
color:#fff;
font-size:34px;
font-weight:bold;
position:absolute;
top:50%;
left:10%;
z-index:1;
letter-spacing:0.1em;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
}

#mainimg .text span {
padding:0 10px;
font-size:46px;
color:#ffea00;
}

#mainimg .mainimg-pc {
display:inline-block;
}

#mainimg .mainimg-sp {
display:none;
}

/* -------------------------------------------------------------- */


/* loading --------------- */

.miyako-loading {
width:100%;
height:100%;
background:#fff4e8;
display:block;
position:absolute;
top:-3px;
left:0;
z-index:1000;
}

.miyako-loading p,
.miyako-loading p:after {
width:30px;
height:30px;
border-radius:50%;
-webkit-transform:border-radius:50%;
-moz-transform:border-radius:50%;
}

.miyako-loading p {
position:absolute;
left:calc(50% - 15px);
top:calc(50% - 15px);
border-top:8px solid rgba(242,109,0, 0.2);
border-right:8px solid rgba(242,109,0, 0.2);
border-bottom:8px solid rgba(242,109,0, 0.2);
border-left:8px solid #f26d00;
transform:translateZ(0);
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
animation:load 1.1s infinite linear;
-webkit-animation:load 1.1s infinite linear;
-moz-animation:load 1.1s infinite linear;
}

@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes load {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------- */


/* top --------------- */

#top {
width:100%;
height:68px;
background:url('/portarl/wp-content/themes/miyakoportarl/images/topfirst.webp') repeat-x center center;
float:left;
}

/* -------------------------------------------------------------- */


/* common --------------- */

.en-title {
width:100%;
margin-top:14px;
font-weight:bold;
color:#f26d00;
float:left;
}

/* -------------------------------------------------------------- */


/* top-map --------------- */

#top-map {
width:100%;
height:680px;
padding:60px 0 100px;
background:#fff4e8;
float:left;
position:relative;
}

#top-map h2 {
width:100%;
font-size:24px;
font-weight:bold;
display:inline-block;
letter-spacing:0.1em;
}

#top-map h2 span {
padding-left:5px;
}

#top-map img.pc {
display:inline-block;
}

#top-map .map-sp {
display:none;
}

#top-map .map {
width:100%;
margin-top:80px;
float:left;
position:relative;
}

#top-map .map img {
width:auto;
max-width:100%;
height:auto;
}

#top-map .map .text {
width:400px;
text-align:left;
font-size:14px;
font-weight:bold;
position:absolute;
top:-40px;
left:0;
}

#top-map .map .text p {
line-height:24px;
margin-bottom:10px;
}

#top-map .map .text p:last-child {
margin-bottom:0;
}

#top-map .map .box {
width:130px;
background:#fff;
font-weight:bold;
position:absolute;
z-index:1;
letter-spacing:0.1em;
}

#top-map .map .box a {
text-decoration:underline;
text-decoration-color:#a0a0a0;
}

#top-map .map .box ul span {
color:#829398;
}

#top-map .map .box:nth-of-type(3) {
top:10px;
right:160px;
}

#top-map .map .box:nth-of-type(4) {
top:220px;
right:230px;
}

#top-map .map .box:nth-of-type(5) {
bottom:80px;
right:280px;
}

#top-map .map .box:nth-of-type(6) {
top:150px;
left:345px;
}

#top-map .map .box:nth-of-type(7) {
bottom:-20px;
left:440px;
}

#top-map .map .box:nth-of-type(8) {
top:280px;
left:180px;
}

#top-map .map .box:nth-of-type(9) {
bottom:-30px;
left:290px;
}

#top-map .map .box:nth-of-type(10) {
bottom:50px;
left:40px;
}

#top-map .map .box:nth-of-type(11) {
bottom:50px;
right:-10px;
}

#top-map .map .box .areatitle {
width:100%;
padding:7px 0;
font-size:14px;
color:#fff;
float:left;
}

#top-map .map .box .areatitle:before {
padding-right:5px;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f3c5';
}

#top-map .map .box:nth-of-type(3) .areatitle {
background:#2aab39;
}

#top-map .map .box:nth-of-type(4) .areatitle {
background:#d369f6;
}

#top-map .map .box:nth-of-type(5) .areatitle {
background:#00c9ff;
}

#top-map .map .box:nth-of-type(6) .areatitle {
background:#2ca6e0;
}

#top-map .map .box:nth-of-type(7) .areatitle {
background:#ff9fd4;
}

#top-map .map .box:nth-of-type(8) .areatitle {
background:#97c932;
}

#top-map .map .box:nth-of-type(9) .areatitle {
background:#e95711;
}

#top-map .map .box:nth-of-type(10) .areatitle {
background:#d6e20e;
}

#top-map .map .box:nth-of-type(11) .areatitle {
background:#f29600;
}


#top-map .map .box ul {
width:100%;
font-size:13px;
float:left;
box-sizing:border-box;
}

#top-map .map .box ul:before {
height:1px;
content:'';
position:absolute;
}

#top-map .map .box .area1 {
padding:10px;
border:1px solid #2aab39;
position:relative;
}

#top-map .map .box .area1:before {
width:30px;
background:#2aab39;
top:10px;
left:-40px;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

#top-map .map .box .area2 {
padding:10px 10px 2px;
border:1px solid #d369f6;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area2:before {
width:30px;
background:#d369f6;
top:40px;
left:-40px;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

#top-map .map .box .area3 {
padding:10px 10px 2px;
border:1px solid #00c9ff;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area3:before {
width:30px;
background:#00c9ff;
top:10px;
left:-35px;
transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-webkit-transform: rotate(-140deg);
}

#top-map .map .box .area4 {
padding:10px 10px 2px;
border:1px solid #2ca6e0;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area4:before {
width:30px;
background:#2ca6e0;
bottom:-25px;
left:55px;
transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-webkit-transform: rotate(-120deg);
}

#top-map .map .box .area5 {
padding:10px 10px 2px;
border:1px solid #ff9fd4;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area5:before {
width:30px;
background:#ff9fd4;
top:-50px;
left:-10px;
transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-webkit-transform: rotate(-130deg);
}

#top-map .map .box .area6 {
padding:10px 10px 2px;
border:1px solid #97c932;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area6:before {
width:30px;
background:#97c932;
bottom:-20px;
right:30px;
transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-webkit-transform: rotate(-140deg);
}

#top-map .map .box .area7 {
padding:10px 10px 2px;
border:1px solid #e95711;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area7:before {
width:30px;
background:#e95711;
top:-50px;
left:40px;
transform: rotate(-130deg);
-moz-transform: rotate(-130deg);
-webkit-transform: rotate(-130deg);
}

#top-map .map .box .area8 {
padding:10px 10px 2px;
border:1px solid #d6e20e;
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
}

#top-map .map .box .area8:before {
width:30px;
background:#d6e20e;
top:30px;
right:-40px;
transform: rotate(-160deg);
-moz-transform: rotate(-160deg);
-webkit-transform: rotate(-160deg);
}

#top-map .map .box .area9 {
padding:10px;
border:1px solid #f29600;
position:relative;
}

#top-map .map .box .area9:before {
width:30px;
background:#f29600;
top:0px;
left:-40px;
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}

#top-map .map .box .area2 li,
#top-map .map .box .area3 li,
#top-map .map .box .area4 li,
#top-map .map .box .area5 li,
#top-map .map .box .area6 li,
#top-map .map .box .area7 li,
#top-map .map .box .area8 li {
width:50%;
margin-bottom:8px;
}

#top-map .map .box .area3 li:last-child,
#top-map .map .box .area4 li:last-child,
#top-map .map .box .area5 li:last-child,
#top-map .map .box .area6 li:last-child,
#top-map .map .box .area8 li:last-child {
width:100%;
}

/* -------------------------------------------------------------- */



/**************************************************
***************************************************
width:[1000px] or less.
***************************************************
**************************************************/

@media screen and (max-width:1000px) {

#mainimg {
margin-bottom:30px;
}

#mainimg .text {
line-height:32px;
padding:15px 20px;
font-size:17px;
left:6%;
}

#mainimg .text span {
padding:0 5px;
font-size:26px;
}

#mainimg .mainimg-pc {
display:none;
}

#mainimg .mainimg-sp {
display:inline-block;
}

.en-title {
margin-top:5px;
}

.miyako-loading {
display:none;
}

#top {
height:0;
padding-bottom:10%;
overflow:hidden;
background:none;
position:relative;
}

#top:before {
width:100%;
height:100%;
background:url('/portarl/wp-content/themes/miyakoportarl/images/topfirst.webp') repeat-x center center;
background-size:120% auto;
content:'';
position:absolute;
top:0;
left:0;
}

#top-map {
height:auto;
padding:40px 10px;
box-sizing:border-box;
}

#top-map h2 {
font-size:18px;
}

#top-map h2 span {
width:100%;
padding-top:10px;
padding-left:0;
float:left;
}

#top-map img.pc {
display:none;
}

#top-map .map-sp {
width:100%;
margin-bottom:20px;
text-align:center;
display:inline-block;
float:left;
}

#top-map .map {
margin-top:20px;
}

#top-map .map .text {
width:100%;
margin-bottom:20px;
font-size:14px;
position:static;
top:0;
}

#top-map .map .box {
width:100%;
float:left;
position:static;
}

#top-map .map .box ul {
font-size:16px;
}

#top-map .map .box ul:before {
height:0;
position:static;
}

#top-map .map .box .area1:before,
#top-map .map .box .area2:before,
#top-map .map .box .area3:before,
#top-map .map .box .area4:before,
#top-map .map .box .area5:before,
#top-map .map .box .area6:before,
#top-map .map .box .area7:before,
#top-map .map .box .area8:before,
#top-map .map .box .area9:before {
width:0;
}

#top-map .map .box .area1,
#top-map .map .box .area2,
#top-map .map .box .area3,
#top-map .map .box .area4,
#top-map .map .box .area5,
#top-map .map .box .area6,
#top-map .map .box .area7,
#top-map .map .box .area8,
#top-map .map .box .area9 {
margin-bottom:1px;
padding-bottom:10px;
display:none;
}

#top-map .map .box .areatitle {
padding:20px 10px;
border-bottom:1px solid #fff;
text-align:left;
font-size:16px;
position:relative;
box-sizing:border-box;
}

#top-map .map .box .areatitle span:before {
width:18px;
height:2px;
background:#fff;
content:'';
position:absolute;
top:50%;
right:11px;
transform:translateY(-50%);
}

#top-map .map .box .areatitle span:after {
width:2px;
height:18px;
background:#fff;
content:'';
position:absolute;
top:50%;
right:19px;
transform:translateY(-50%);
transition:all .3s;
}

#top-map .map .box .areatitle.open span:after {
top:25%;
transform:rotate(90deg);
opacity:0;
}

#top-map .map .box .area1 li,
#top-map .map .box .area2 li,
#top-map .map .box .area3 li,
#top-map .map .box .area4 li,
#top-map .map .box .area5 li,
#top-map .map .box .area6 li,
#top-map .map .box .area7 li,
#top-map .map .box .area8 li,
#top-map .map .box .area9 li {
width:100%;
margin-bottom:0;
text-align:left;
}

#top-map .map .box a,
#top-map .map .box ul span {
width:100%;
padding:10px 0;
float:left;
}

}


/**************************************************
***************************************************
width:[480px] or less.
***************************************************
**************************************************/

@media screen and (max-width:480px) {

#mainimg {
overflow:hidden;
position:relative;
}

#mainimg:before {
content:'';
display:block;
padding-top:140%;
}

#mainimg img {
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}





#mainimg .text {
line-height:24px;
font-size:14px;
}

#mainimg .text span {
font-size:20px;
}

}