@charset "utf-8";
/**************************************************
All Page
**************************************************/

/*** css initialize ***/
html, body, div, h1, h2, h3, h4, h5, h6, p, span, header, footer, nav, aside,
small, abbr, address, code, del, img, ins, kbd, q, samp,
strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, dialog, figure,
menu, section, time, mark, object, audio, video {
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
word-break:break-all;
word-wrap:break-word;
}

section, header, footer, aside, article, menu, nav, details, figcaption, figure {
display:block;
}

h1, h2, h3, h4, h5, h6 {
font-weight:normal;
}

body {
font-family:"BIZ UDGothic", "游ゴシック体", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
font-size:16px;
text-align:center;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
color:#4c4c4c;
background:#fff;
}

body.ban {
overflow:hidden;
}

html {
}

.clear {
clear:both;
}

img {
border:none;
vertical-align:bottom;
}

ul,ol {
list-style:none;
}

a {
color:#4c4c4c;
outline:none;
text-decoration:none;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

a:hover,
a:active {
color:#b4b4b4;
}

a[href^="tel:"] {
pointer-events:none;
}

textarea {
font-family:"BIZ UDGothic", "游ゴシック体", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
}

@font-face {
font-family:'Font Awesome 5 Free';
font-style:normal;
font-weight:400;
src: url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-regular-400.eot");
src: url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-regular-400.woff2") format("woff2"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-regular-400.woff") format("woff"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-regular-400.ttf") format("truetype"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-regular-400.svg#fontawesome") format("svg");
font-display:swap;
}

@font-face {
font-family:'Font Awesome 5 Free';
font-style:normal;
font-weight:900;
src: url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-solid-900.eot");
src: url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-solid-900.woff2") format("woff2"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-solid-900.woff") format("woff"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-solid-900.ttf") format("truetype"),
url("/portarl/wp-content/themes/miyakoportarl/fonts/webfonts/fa-solid-900.svg#fontawesome") format("svg");
font-display:swap;
}

/* wrapper --------------- */

#wrapper {
width:100%;
text-align:center;
float:left;
overflow:hidden;
}

.wrap {
width:100%;
float:left;
}

.block {
width:1000px;
margin:0 auto;
}

.sp {
display:none;
}

#side-fix.fixed {
width:294px;
position:fixed;
top:0;
}

#side-fix-banner {
width:100%;
float:left;
}

#side-fix-banner.fixed {
width:294px;
position:fixed;
top:0;
}

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


/* header --------------- */

header#header {
width:100%;
padding:15px 0;
background:#fff;
float:left;
}

header#header p.title {
width:100%;
padding-bottom:15px;
text-align:left;
font-size:14px;
float:left;
}

header#header .logo,
header#header .logo img {
float:left;
}

header#header #header-out-nav {
text-align:left;
font-size:12px;
float:right;
}

header#header #header-out-nav ul {
float:right;
}

header#header #header-out-nav ul li {
width:75px;
text-align:center;
font-weight:bold;
float:left;
}

header#header #header-out-nav ul li a {
width:100%;
float:left;
}

header#header #header-out-nav ul li a:before {
width:100%;
margin-bottom:4px;
font-size:22px;
float:left;
color:#f26d00;
font-family:'Font Awesome 5 Free';
font-weight:900;
}

header#header #header-out-nav ul li.mypage a:before {
content:'\f4ff';
}

header#header #header-out-nav ul li.logout a:before {
content:'\f2f5';
}

header#header #header-out-nav ul li.login a:before {
content:'\f2f6';
}

header#header #header-out-nav ul li.shopregister a:before {
content:'\f54e';
}

header#header #header-out-nav ul li a:hover {
color:#f26d00;
}

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


/* sub content --------------- */

#under {
width:100%;
background:#fff4e8;
float:left;
}

#underpage,
#underuser {
width:1000px;
margin:0 auto;
}

#underuser #content {
width:100%;
}

#content {
width:670px;
padding:40px;
background:#fff;
float:left;
box-sizing:border-box;
border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
}

#content p {
line-height:28px;
margin-bottom:15px;
font-size:15px;
}

#content p:last-child {
margin-bottom:0;
}

#content a {
color:blue;
}

#content a:hover {
color:#b4b4b4;
}

header.content-header {
width:100%;
margin-bottom:30px;
float:left;
}

header.content-header h1 {
width:100%;
padding:30px 10px;
background:#f26d00;
font-size:26px;
font-weight:bold;
color:#fff;
position:relative;
letter-spacing:0.15em;
box-sizing:border-box;
}

header.content-header h1:before,
header.content-header h1:after {
width:100%;
height:2px;
background:#fff;
position:absolute;
left:0;
content:'';
}

header.content-header h1:before {
top:5px;
}

header.content-header h1:after {
bottom:5px;
}

#underpage h2.h2title,
#underpage-construction h2.h2title {
width:100%;
margin-bottom:30px;
padding:25px 20px;
font-size:18px;
font-weight:bold;
border-top:3px solid #f26d00;
border-bottom:3px solid #f26d00;
background-size:auto auto;
background-color:rgba(255, 255, 255, 1);
background-image:repeating-linear-gradient(-45deg, transparent, transparent 7px, rgba(255, 249, 244, 0.4) 7px, rgba(255, 249, 244, 0.4) 20px );
float:left;
box-sizing:border-box;
letter-spacing:0.1em;
border-radius:15px 0 15px 0;
}

#underpage h3.h3title,
#underpage-construction h3.h3title {
width:100%;
margin-bottom:30px;
padding-bottom:10px;
font-size:18px;
font-weight:bold;
border-bottom:1px solid #f26d00;
float:left;
box-sizing:border-box;
position:relative;
}

#underpage h3.h3title:before,
#underpage-construction h3.h3title:before {
margin-right:8px;
color:#f26d00;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f4d6';
}

#underpage h3.h3title:after,
#underpage-construction h3.h3title:after {
width:100%;
height:2px;
background:#f26d00;
content:'';
position:absolute;
left:0;
bottom:-7px;
}

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


/* breadcrumbs --------------- */

#breadcrumbs {
width:100%;
padding:30px 0;
text-align:left;
font-size:14px;
float:left;
}

#breadcrumbs p {
padding-right:12px;
float:left;
}

#breadcrumbs p.bread-home:before {
margin-right:5px;
color:#f26d00;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f6f1';
}

#breadcrumbs p.bread-sub:before {
margin-right:10px;
color:#f26d00;
font-family:'Font Awesome 5 Free';
font-weight:900;
content:'\f054';
}

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


/* widget --------------- */

.widget {
width:294px;
float:right;
}

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


/* banner --------------- */

.side-main-banner {
width:100%;
float:left;
}

.side-main-banner .side-banner-in {
width:100%;
margin-bottom:20px;
float:left;
}

.side-main-banner .side-banner-in:last-child {
margin-bottom:0;
}

.side-main-banner .side-banner-in img {
width:100%;
height:auto;
}

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


/* 404 --------------- */

#wrap-error {
width:100%;
margin:20px 0;
padding:50px 0;
background:#fff;
font-size:24px;
font-weight:bold;
float:left;
}

#wrap-error p {
margin:10px 0;
}

#wrap-error p.top-link {
margin:50px 0 0;
font-size:16px;
}

#wrap-error p.top-link a {
padding:15px 35px;
background:#f26d00;
color:#fff;
}

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


/* footer --------------- */

footer#footer {
width:100%;
background:#fff;
float:left;
}

#under footer#footer {
margin-top:50px;
}

footer#footer .box {
width:1000px;
margin:0 auto;
padding:50px 0;
display:inline-block;
}

#footer-logo {
width:38%;
text-align:left;
float:left;
box-sizing:border-box;
}

#footer-logo p.img {
width:100%;
float:left;
}

#footer-logo p.img img {
width:auto;
max-width:100%;
height:auto;
}

footer#footer nav {
width:62%;
margin-top:15px;
text-align:left;
float:left;
}

footer#footer nav ul {
width:100%;
float:left;
}

footer#footer nav li {
margin-right:15px;
padding-bottom:5px;
font-size:14px;
font-weight:bold;
float:left;
}

footer#footer nav li:last-child {
padding-bottom:0;
}

footer#footer nav li a:before {
padding-right:5px;
font-size:8px;
color:#d0d0d0;
content:'●';
vertical-align:0.2em;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

footer#footer nav li a:hover:before {
color:#f26d00;
}

#copylight {
width:100%;
padding:20px 0;
background:#f26d00;
font-size:14px;
color:#fff;
float:left;
}

#copylight a {
color:#fff;
}

#top-scroll {
font-size:12px;
position:fixed;
bottom:100px;
right:-20px;
z-index:100;
display:none;
transform:rotate(90deg);
letter-spacing:0.1em;
}

#top-scroll a {
color:#ffa053;
position:relative;
}

#top-scroll a:before,
#top-scroll a:after {
width:20px;
height:1px;
content:'';
display:block;
background:#ffa053;
position:absolute;
}

#top-scroll a:before {
width:30px;
top:6px;
left:-37px;
}

#top-scroll a:after {
width:20px;
bottom:5px;
right:-25px;
}

#top-scroll a span {
position:absolute;
top:6px;
left:-38px;
transform:rotate(-90deg);
}

#top-scroll a span:before,
#top-scroll a span:after {
width:1px;
height:12px;
content:'';
display:block;
background:#ffa053;
position:absolute;
top:0;
}

#top-scroll a span:before {
right:-4px;
transform:rotate(-35deg);
}

#top-scroll a span:after {
right:4px;
transform:rotate(35deg);
}

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

/* pagenation --------------- */

.page-numb {
width:100%;
margin-top:20px;
font-weight:bold;
float:left;
}

.page-numb span.current {
background:#f26d00;
border:1px solid #f26d00;
border:0;
color:#fff;
}

.page-numb span.dots,
.page-numb span.dots:hover {
padding:6px 3px 0;
border:0;
background:none;
}

#content .page-numb a {
margin-bottom:10px;
color:#4c4c4c;
}

#content .page-numb a:hover {
background:#f26d00;
border:1px solid #f26d00;
color:#fff;
}

.page-numb .page-numbers {
width:36px;
height:36px;
line-height:36px;
margin:0 2px;
border:1px solid #e8e8e8;
color:#4c4c4c;
display:inline-block;
box-sizing:border-box;
border-radius:50%;
-webkit-transform:border-radius:50%;
-moz-transform:border-radius:50%;
}

#content .page-numb a.next,
#content .page-numb a.prev {
background:none;
border:0;
font-size:14px;
color:#4c4c4c;
}

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


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

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

.block {
width:100%;
}

.pc {
display:none;
}

.sp {
display:block;
}

a[href^="tel:"] {
pointer-events:auto;
}

header#header p.title {
display:none;
}

header#header .logo {
margin-top:0;
margin-left:10px;
}

#global,
#global span {
display:inline-block;
box-sizing:border-box;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

#global {
width:40px;
position:fixed;
top:10px;
right:10px;
cursor:pointer;
z-index:1003;
}

#global p {
padding-top:7px;
font-size:10px;
color:#f26d00;
letter-spacing:0.1em;
font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
font-weight:bold;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

#global > div {
width:40px;
height:20px;
margin-bottom:4px;
position:relative;
}

#global span {
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#f26d00;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}

.nav-scroll span {
background-color:#e66700!important;
}

#global span:nth-of-type(1) {
top: 0;
}

#global span:nth-of-type(2) {
top:12px;
}

#global span:nth-of-type(3) {
top:24px;
}

#global.active span {
background-color:#2c2c2c!important;
}

#global.active p {
color:#2c2c2c!important;
}

#global.active span:nth-of-type(1) {
transform:translateY(12px) rotate(-45deg);
-webkit-transform:translateY(12px) rotate(-45deg);
-moz-transform:translateY(12px) rotate(-45deg);
}

#global.active span:nth-of-type(2) {
left:60%;
opacity:0;
animation:menu-anima 0.8s forwards;
-webkit-animation:menu-anima 0.8s forwards;
-moz-animation:menu-anima 0.8s forwards;
}

@keyframes menu-anima {
  100% {
    height:0;
  }
}

@-webkit-keyframes menu-anima {
  100% {
    height:0;
  }
}

@-moz-keyframes menu-anima {
  100% {
    height:0;
  }
}

#global.active span:nth-of-type(3) {
transform:translateY(-12px) rotate(45deg);
-webkit-transform:translateY(-12px) rotate(45deg);
-moz-transform:translateY(-12px) rotate(45deg);
}

#global-nav {
width:100%;
height:100%;
padding:80px 0 0;
background:rgba(255,255,255,1);
display:none;
position:fixed;
top:0;
left:0;
z-index:1000;
text-align:center;
box-sizing:border-box;
overflow-y:auto;
}

header#header #header-out-nav {
width:100%;
padding:0 15px;
font-size:15px;
box-sizing:border-box;
}

header#header #header-out-nav ul {
width:100%;
}

header#header #header-out-nav ul li {
width:100%;
text-align:left;
}

header#header #header-out-nav ul li a:before {
width:auto;
margin-bottom:0;
padding-right:5px;
font-size:15px;
float:none;
}

header#header #header-out-nav ul li a {
padding:20px 0;
border-bottom:1px solid #ececec;
}

header#header #header-out-nav ul li:first-child a {
border-top:1px solid #ececec;
}

footer#footer .box {
width:100%;
padding:20px 0 0;
float:left;
box-sizing:border-box;
}

#footer-logo {
width:100%;
margin-bottom:20px;
text-align:center;
}

footer#footer nav {
width:100%;
margin-top:0;
}

footer#footer nav li {
width:50%;
margin-right:0;
padding-bottom:0;
text-align:left;
font-size:13px;
}

footer#footer nav li a {
width:100%;
padding:15px 5px 15px 15px;
background:#fbfbfb;
border:1px solid #fff;
float:left;
box-sizing:border-box;
}

footer#footer nav li a:before {
color:#f26d00;
vertical-align:0.15em;
}

#top-scroll {
bottom:70px;
right:-40px;
}

#top-scroll a:before {
top:6px;
}

#top-scroll a:after,
#top-scroll a span:after {
display:none;
}

#underpage,
#underuser {
width:100%;
padding:0 10px;
box-sizing:border-box;
}

#underpage h2.h2title {
line-height:26px;
padding:20px 15px;
font-size:16px;
}

#underpage h3.h3title {
line-height:24px;
font-size:15px;
}

#content {
width:100%;
padding:15px;
}

header.content-header {
margin-bottom:20px;
}

header.content-header h1 {
padding:20px 5px;
font-size:16px;
}

#content p {
line-height:26px;
font-size:14px;
}


/* breadcrumbs --------------- */

#breadcrumbs {
line-height:22px;
margin:20px 0;
padding:20px 10px;
background:#fff;
font-size:13px;
box-sizing:border-box;
}

#breadcrumbs p {
padding-right:8px;
}

#breadcrumbs .box {
display:flex;
justify-content:flex-start;
-webkit-box-pack:start;
-moz-flex-pack:start;
flex-direction: row;
overflow-x:scroll;
overflow-scrolling:touch;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
white-space:nowrap;
}

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

/* widget --------------- */

.widget {
width:100%;
margin-top:30px;
text-align:center;
box-sizing:border-box;
}

.widget aside {
margin-bottom:20px;
}

#side-fix.fixed,
#side-fix-banner.fixed {
width:100%;
float:left;
position:static;
}

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


}








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

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

header#header h1 img,
header#header .logo img {
width:70%;
height:auto;
float:left;
}



#copylight {
width:100%;
padding:10px 5px;
font-size:12px;
box-sizing:border-box;
}

}


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

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

}