#foreignersbox {
background-color: #FFFEFC;
}
.rent-sp {
display: none;
}
.br-sp {
display: none;
}
.br-sp2 {
        display: none;
}

#mainvisual  {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
transform: translate3d(0, 0, 0);
text-align: center;
opacity: 1;
animation: fadeout 3.35s;
animation-fill-mode: forwards;
}

@keyframes fadeout {
0%{
opacity: 1;
background-color: #136cbc;
}
80%{
opacity: 1;
background-color: #136cbc;
}
99%{
width: 100%;
height: 100%;
opacity: 0;
display: none;
}
100%{
width: 0;
height: 0;
}
}





/*TOP画像*/
.foreigners-topbox {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
width: 100%;
height: 570px;
margin-top: 3rem;
z-index: -9999;
}
.slideBox {
position: absolute;
top:0;
right: 0;
width: 100%;
height: 100%;
}
.item1 {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
right: 0;
}
.foreigners-toptext img {
width: 13%;
min-width: 150px;
margin: 0 3rem;
}

/*-ヘッダーメニュー-*/
.header-top h1{
position: absolute;
width: 100%;
max-width: 1200px;
padding: 0 30px;
font-size: 12px;
z-index: 1;
}
#header .header-menu-text- {
font-size: 1.5rem;
text-align: center;
margin-bottom: 1rem;
}
#header .header-logo- {
width: 100%;
height: auto;
background-color: #FFFFFF;
}
#header .header-container {
width: 75%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
#header .logo-box- {
width: 50%;
height: auto;
overflow: hidden;
float: left;
}
#header .logo-box- a {
display: block;
width: 60%;
min-width: 250px;
height: 0;
overflow: hidden;
padding-top: 100px;
background-image: url(../images/logo.png);
background-position: 0 center;
background-repeat: no-repeat;
background-size: 100% auto;
}
#header .header-menu {
width: 60%;
height: auto;
overflow: hidden;
float: right;
}
#header .header-menu li{
width: calc(100%/3);
max-width: 200px;
height: auto;
overflow: hidden;
}
#header .header-menu li a {
display: inline;
}
#header.language {
width: 100%;
}
#header .header-menu li.header-yoyaku a .head-icon-box {
background-image: url(../images/raiten_yoyaku.png);
}
#header .header-menu li.header-yoyaku:hover a .head-icon-box {
background-image: url(../images/raiten_yoyaku2.png);
}
#header .header-menu li.header-yoyaku:active a .head-icon-box {
background-image: url(../images/raiten_yoyaku2.png);
}
#header .header-menu li.header-contact a .head-icon-box {
background-image: url(../images/otoiawase.png);
}
#header .header-menu li.header-contact:hover a .head-icon-box {
background-image: url(../images/otoiawase2.png);
}
#header .header-menu li.header-contact:active a .head-icon-box {
background-image: url(../images/otoiawase2.png);
}
#header .header-contact{
border-left: solid 1.5px #C1BABB;
}
#header .header-menu li a .head-icon-box {
width: 100%;
height: 70px;
background-size: 50px auto;
background-position: center bottom 1.5rem;
background-repeat: no-repeat;
margin: 2.5rem 0 -10px 0;
}
#header .header-language {
display: block;
width: 100%;
height: auto;
text-align: center;
text-decoration: none;
font-size: 1.2rem;
padding: 10px 0;
background-color: #136CBC;
color: #FFFFFF;
}
#header .head-google-box {
width: 100%;
height: 41px;
margin: 3rem 0 0.5rem 0;
}

/*TOP画像上文字*/
.foreigners-toptext {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
max-width: 1200px;
position: absolute;
top: 59%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFFFFF;
margin: 0 auto;
}
.toptext01 {
font-size: 48px;
line-height: 1.3;
margin: 0 3rem;
font-weight: bold;
}

/*-scroll-*/
.scrolldown {
padding: 0 50% 0;
margin-top: 340px;
}
.scrolldown span {
color: #FFFFFF;
font-size: 1.5rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.dli-arrow-down {
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
line-height: 1;
position: relative;
left: 2rem;
bottom: -4.2rem;
width: 0.05em;
height: 2.8em;
background: currentColor;
}
.dli-arrow-down::before {
content: '';
width: 0.7em;
height: 0.7em;
border: 0.1em solid currentColor;
border-top: 0;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
transform-origin: bottom left;
position: absolute;
left: 30%;
bottom: -0.05em;
box-sizing: border-box;
}

.updown {
animation-name: UpDown;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes UpDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(20px);
}
}

/*TOP説明*/
.toptext02 {
font-size: 2vw;
line-height: 3;
text-align: center;
}

/*-main-*/
.back {
width: 100%;
height: 570px;
}
.foreigners-text02-content{
display: block;
width: 100%;
padding-top: 7%;
padding-bottom: 7%;
margin: auto;
}
.foreigners-text02{
display: table;
width: 60%;
max-width: 1200px;
margin: auto;
}
.foreigners-text02box p{
font-size: 1.6rem;
line-height: 1.5em;
}
.foreigners-text02box{
display: table-cell;
vertical-align: middle;
}
.foreigners-h2text{
font-size: 24px;
margin-bottom: 2rem;
border-bottom: dotted 2px;
}
.foreigners-KT {
font-size: 36px;
line-height: 30px;
}
.foreigners-text02top{
padding-top: 1.5em;
}
.foreigners-message-text {
display: block;
width: 100%;
padding-top: 90px;
padding-bottom: 50px;
margin: auto;
}

.scroll_up{
display: block;
width: 100%;
}
.scroll_in{
display: block;
width: 100%;
}

/*-背景-*/
.bottom-Rectangles {
background-image: repeating-linear-gradient(45deg, #F4F9FD 25%, transparent 25%, transparent 75%, #F4F9FD 75%, #F4F9FD), repeating-linear-gradient(45deg, #F4F9FD 25%, #EFF6FC 25%, #EFF6FC 75%, #F4F9FD 75%, #F4F9FD);
background-position: 0 0, 7px 7px;
background-size: 14px 14px;
}

/*scroll_up ｜下から上へ出現*/
.scroll_up {
transition: 0.8s ease-in-out;
transform: translateY(30px);
opacity: 0;
}
.scroll_up.on {
transform: translateY(0);
opacity: 1.0;
}
/*scroll_in ｜右から左へ出現*/
.slide_in {
transition: 1s ease-in-out;
transform: translateX(200px);
opacity: 0;
}

.slide_in.on {
transform: translateX(0);
opacity: 1.0;
}





/*-カテゴリー-*/
.categoryboxPFF {
width: 100%;
height: 350px;
margin-bottom: 3%;
}
.PFFC{
width: 100%;
height: 35vw;
max-height: 350px;
}
.PFFs {
position: absolute;
width: 100%;
height: 35vw;
max-height: 350px;
text-align: center;
}
.PFFs img {
width: 100%;
}
.PFF_img {
position: absolute;
object-fit: cover;
height: 100%;
right: 0;
}
.PFF_text {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
font-size: 32px;
/* font-weight: bold; */
color: #FFFFFF;
text-shadow: 0 0 2px #54575770;
transform: translate(-50%, -50%);
border: none;
margin: 0 auto;
}
.PFF-title {
width: 55%;
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
.PFF-titlep {
width: 100%;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.PFF-titlep a{
text-decoration: none;
font-size: 30px;
font-weight: bold;
margin-bottom: 1rem;
}
.PFF-titlep2{
width: 100%;
font-size: 18px;
line-height: 2em;
text-align: left;
}
.category-boxPFF02{
display: flex;
width: 78%;
max-width: 1200px;
flex-direction: row;
flex-wrap: wrap;
margin: auto;
margin-top: 2%;
margin-bottom: 50px;
}
.category{
display: flex;
justify-content: center;
align-items: flex-start;
padding: 1.3% 0.8%;
width : 20% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 5) ;
width : calc(100% / 5) ;
}
.category01 {
width: 100%;
height: 8.5vw;
position: relative;
z-index: 2;
transition: .3s;
background: #FFFFFF;
color: #136CBC;
border: solid 2px #136CBC;
border-radius: 10px;
}
.category01 p {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
max-width: 1200px;
height: 8vw;
font-size: 16px;
font-weight: 600;
color: #136CBC;
border-radius: 10px;
line-height: 1.2;
}
.category01 a{
text-decoration: none;
}

.category01::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #136CBC;
transition: transform ease .3s;
transform-origin: 100% 50%;
transform: scaleX(0);
border-radius: 10px;
}
.category01:hover p{
color: #FFFFFF;
}
.category01:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
border-radius: 7px;
}
.PFF-title02{
width: 55%;
max-width: 1200px;
text-align: center;
margin: 0 auto;
}

/*-topics-*/
.topics-content {
width: 100%;
padding-bottom: 80px;
}
.topics-content2 {
width: 100%;
padding: 3rem 0;
background-color: #E9F3F8;
}
.topics-box {
width: 75%;
max-width: 1200px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
#content .topics-box {
width: 80%;
max-width: 1200px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.content-title {
text-align: center;
color: #333;
margin-top: 2rem;
}
.content-title h2 {
font-size: 3rem;
width: 100%;
height: auto;
padding: 0 1rem 1rem;
}
.topics-box .topics-list {
margin-top: 0rem;
}
.topics-box dl,
.topics-box dt,
.topics-box dd {
list-style: none;
}
.topics-box .article {
width: 100%;
height: auto;
overflow: hidden;
padding: 1rem 0;
margin: 2rem auto;
border-bottom: dotted 1px #C1BABB;
}
.topics-box .article dt {
display: block;
width: 20%;
height: auto;
padding: 0.5rem;
background-color: #136CBC;
color: #ffffff;
text-align: center;
float: left;
}
.topics-box .article dd {
display: block;
width: 80%;
height: auto;
padding-left: 3rem;
float: left;
}
.topics-box .article dd a {
text-decoration: none;
}
.topics-box .article dd .blog-title {
width: 100%;
height: auto;
padding-bottom: 0.5rem;
font-size: 1.6rem;
color: #136CBC;
}
.blog-title:visited {
color: #4f98d8;
}
.topics-btn {
width: max-content;
margin: 0 0 0 auto;
border-radius: 10px;
background-color: #136CBC;
color: #ffffff;
}
.topics-btn a {
display: inline-block;
padding: 1rem 3rem;
color: #ffffff;
text-decoration: none;
}

/*-来店予約等背景-*/
.bottom_background {
background-color: #d3e9f4;
background-image: linear-gradient(
45deg,
rgba(233, 243, 248, 1) 25%,
rgba(233, 243, 248, 1) 25%,
transparent 25%,
transparent 100%
),
linear-gradient(
-135deg,
rgba(233, 243, 248, 1) 25%,
rgba(233, 243, 248, 1) 25%,
transparent 25%,
transparent 100%
),
linear-gradient(
-135deg,
rgba(211, 233, 244, 1) 25%,
rgba(211, 233, 244, 1) 25%,
transparent 25%,
transparent 100%
),
linear-gradient(
45deg,
rgba(211, 233, 244, 1) 25%,
rgba(211, 233, 244, 1) 25%,
transparent 25%,
transparent 100%
),
linear-gradient(
45deg,
rgba(233, 243, 248, 1) 0%,
rgba(233, 243, 248, 1) 6%,
transparent 6%,
transparent 11%,
rgba(233, 243, 248, 1) 11%,
rgba(233, 243, 248, 1) 17%,
transparent 17%,
transparent 22%,
rgba(233, 243, 248, 1) 22%,
rgba(233, 243, 248, 1) 28%,
transparent 28%,
transparent 33%,
rgba(233, 243, 248, 1) 33%,
rgba(233, 243, 248, 1) 39%,
transparent 39%,
transparent 44%,
rgba(233, 243, 248, 1) 44%,
rgba(233, 243, 248, 1) 50%,
transparent 50%,
transparent 55%,
rgba(233, 243, 248, 1) 55%,
rgba(233, 243, 248, 1) 61%,
transparent 61%,
transparent 66%,
rgba(233, 243, 248, 1) 66%,
rgba(233, 243, 248, 1) 72%,
transparent 72%,
transparent 77%,
rgba(233, 243, 248, 1) 77%,
rgba(233, 243, 248, 1) 83%,
transparent 83%,
transparent 88%,
rgba(233, 243, 248, 1) 88%,
rgba(233, 243, 248, 1) 94%,
transparent 94%,
transparent 100%
);
background-size: 60px 60px;
background-position: 0 0, 30px 30px, 0 0, 30px 30px, 0 0;
}

.foreigners-contact-container{
width: 100%;
margin-top: 80px;
}
.foreigners-contactbox01 {
display: flex;
justify-content: center;
align-items: center;
width : 75%;
margin: 0 auto;
}
.foreigners-contactbox01a {
width : 100%;
margin: 0 auto;
padding: 5em 50px 6em;
}
.foreigners-contactbox01b {
width : 100%;
margin: 0 auto;
padding: 5em 50px 6em;
}
.foreigners-contactbox01 a {
text-decoration: none;
}

.contact-img {
width: 100%;
height: 129px;
background-size: 90px auto;
background-position: center bottom 1.5rem;
background-repeat: no-repeat;
margin: 0 auto;
}
.foreigners-contactbox02img{
position: relative;
left: 0;
}
.foreigners-contactbox02img img {
position: absolute;
width: 100%;
height: auto;
width: 6em;
}
.foreigners-contactbox02img img:last-of-type {
opacity: 0;
}
.foreigners-contactbox01a:hover img {
opacity: 1;
}
.foreigners-contactbox01a:active img {
opacity: 1;
}
.foreigners-contactbox01b:hover img {
opacity: 1;
}
.foreigners-contactbox01b:active img {
opacity: 1;
}

.foreigners-contactbox02 {
width: 100%;
height: 180px;
margin: 0 auto;
text-align: center;
background-color: #FFFFFF;
border: solid 1px #3D3939;
box-shadow: 1em 1em rgba(61, 57, 57, .2);
transition: all 0.1s 0s ease-in-out;
}
.foreigners-contactbox01a:hover .foreigners-contactbox02{
box-shadow: 0.5em 0.5em rgba(61, 57, 57, .4);
transform: translate(0.25em, 0.25em);
transition: all 0.1s 0s ease-in-out;
}
.foreigners-contactbox01b:hover .foreigners-contactbox02 {
box-shadow: 0.5em 0.5em rgba(61, 57, 57, .4);
transform: translate(0.25em, 0.25em);
transition: all 0.1s 0s ease-in-out;
}

.foreigners-contactbox02 a{
text-decoration-line: none;
}
.contact-text {
text-align: center;
font-size: 1.8rem;
font-weight: bold;
padding-bottom: 1.2em;
color: #3D3939;
}

/*-ページトップへ-*/
#page-top {
position: fixed;
right: 10px;
z-index: 3;
width: 60px;
height: 60px;
color: #FFFFFF;
border: solid 2px #3C3939;
transform: translateY(100px);
opacity: 0; 
}
#page-top a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size: 0.6rem;
transition: all 0.3s;
}
.uptext {
width: 20px;
height: 20px;
border: 5px solid;
border-color: #3C3939 #3C3939 transparent transparent;
transform: rotate(-45deg);
margin-top: 2em;
}
.page-top-wrap {
height: 60px;
}
#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

#page-top.DownMove {
animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}

section {
padding: 500px 0;
}
#footer {
background: #3C3939;
margin-top: 0;
}

#inquiry .foreigners-contactbox01a a .contact-img {
background-image: url(../images/raiten_yoyaku.png);
}
#inquiry .foreigners-contactbox01a:hover a .contact-img {
background-image: url(../images/raiten_yoyaku2.png);}
#inquiry .foreigners-contactbox01a:active a .contact-img {
background-image: url(../images/raiten_yoyaku2.png);
}

#inquiry .foreigners-contactbox01b a .contact-img {
background-image: url(../images/otoiawase.png);
}
#inquiry .foreigners-contactbox01b:hover a .contact-img {
background-image: url(../images/otoiawase2.png);}
#inquiry .foreigners-contactbox01b:active a .contact-img {
background-image: url(../images/otoiawase2.png);
}

.copyright {
text-align: center;
color: #FFFFFF;
padding: 0.7em 0;
}

/*よくある質問*/
.PFFfaq {
position: relative;
top: 0;
left: 0;
z-index: 10;
width: 100%;
max-width: 1200px;
margin: 0 auto;
margin-top: 3rem;
text-align: center;
}

.PFF-faq {
position: relative;
width: 75%;
height: 150px;
margin: 0 auto 0.5rem;
padding-bottom: 10px;
border-radius: 9px;
}


/* .PFF-faq-line {
width: 75%;
height: 150px;
background:
                linear-gradient(135deg, #0000 20.5%, #00C906 0 29.5%, #0000 0) 0 14px,
                linear-gradient(45deg, #0000 8%, #00C906 0 17%, #0000 0 58%) 28px 0,
                linear-gradient(135deg, #0000 8%, #00C906 0 17%, #0000 0 58%, #00C906 0 67%, #0000 0),
                linear-gradient(45deg, #0000 8%, #00C906 0 17%, #0000 0 58%, #00C906 0 67%, #0000 0 83%, #00C906 0 92%, #0000 0),
                #00CD06;
background-size: 74px 74px;
border-radius: 10px;
} */

.PFF-faq img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 150px;
margin: 0 auto;
object-fit: cover;
border-radius: 10px;
}
.PFF-s-img img {
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%, -50%);
height: 150px;
margin: 0 auto;
border-radius: 10px;
}

.PFF-faq-linebox {
        position: relative;
        width: 75%;
        margin: 0 auto;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 10px;
}
.PFF-faq-line {
        width: 100%;
        height: 150px;        
}
.PFF-faq-linebox .PFF_line01 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 150px;
        margin: 0 auto;
        object-fit: cover;        
}
.PFF-faq-linebox .PFF_line03 {
        position: absolute;
        height: 30vw;
        max-height: 100px;
        right: 10%;
        bottom: 10%;
}
.PFF-faq-linebox .PFF_line02 {
        position: absolute;
        height: 30vw;
        max-height: 150px;
        right: 0%;
        bottom: 0;
}
.PFF-faq_text {
        width: 70%;
        margin: 0 auto;
        text-align: start;
}
.PFF-supporttext {
        text-align: center;
}

.faqimg {
width: 100%;
}

.PFF-faqtext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
font-size: 21px;
text-decoration: none;
text-align: left;
margin: 0 auto;
color: #FFFFFF;
}
.PFF-line-text {
        text-shadow: 0 0 3px #18881ce5;
}

.faqtext {
font-size: 18px;
font-weight: bold;
}

.breadcrumb {
width: 94%;
}
.breadcrumb-box {
background-color: #136CBC;
}
.top-title-box span.en {
color: #136CBC;
}

.foreigners-faqbox {
overflow: hidden;
width: 100%;
height: 350px;
z-index: -9999;
}

.faqslideBox {
position: relative;
width: 100%;
height: 350px;
}

.faqitem1 {
position: absolute;
object-fit: cover;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 350px;
}

.foreigners-faqtoptext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}

.foreigners-faqtoptext h4 {
width: 100%;
font-size: 32px;
color: #FFFFFF;
margin: 0 auto 1rem;
text-align: center;
}

.faqtoptext {
width: 100%;
color: #FFFFFF;
font-size: 24px;
line-height: 1.3;
margin: 0 auto;
font-weight: bold;
text-align: center;
}
.faqtoptext-s {
width: 75%;
margin: 0 auto;
}
.faqtoptext-s2 {
width: 100%;
max-width: 1000px;
color: #FFFFFF;
font-size: 24px;
line-height: 1.3;
margin: 0 auto;
font-weight: bold;
text-align: left;
}

.back02 {
width: 100%;
height: 130px;
}
.back0faq {
width: 100%;
height: 250px;
}

.cp_qa *,
.cp_qa *:after,
.cp_qa *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.cp_qa {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #1b2538;
padding-top: 3rem;
}

.cp_actab {
position: relative;
overflow: hidden;
width: 95%;
margin: 0 auto;
margin-bottom: 1em;
color: #1b2538;
}

.cp_qa .cp_actab input {
position: absolute;
opacity: 0;
}


/*ご利用の流れ*/
.howtouse {
width: 100%;
color: #ffffff;
background: linear-gradient(#136CBC, #50D2B4);
padding: 40px 0 45px 0;
overflow: hidden;
margin-bottom: 80px;
}
.houtouse-box {
width: 78%;
max-width: 1200px;
margin: 0 auto;
}
.htu-title {
display: inline-block;
font-size: 21px;
padding-bottom: 0.25rem;
margin-bottom: 0.2rem;
border-bottom: dotted 2px #ffffff;
font-weight: bold;
}
.houtouse-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.hut-box01-pc {
display: grid;
grid-auto-columns: calc(100%/11);
margin: 0 auto;
}
.hut-box01pc p {
font-size: 14px;
}
.hut-box01-sp {
display: none;
}

.li-01{
grid-row: 1/2;
grid-column: 1/3;
}
.li-02 {
grid-row: 1/2;
grid-column: 3/4;
}
.li-03 {
grid-row: 1/2;
grid-column: 4/6;
}
.li-04 {
grid-row: 1/2;
grid-column: 6/7;
}
.li-05 {
grid-row: 1/2;
grid-column: 7/9;
}
.li-06 {
grid-row: 1/2;
grid-column: 9/10;
}
.li-07 {
grid-row: 1/2;
grid-column: 10/12;
}
.li-08 {
grid-row: 2/3;
grid-column: 1/2;
}
.li-09 {
grid-row: 2/3;
grid-column: 2/4;
}
.li-10 {
grid-row: 2/3;
grid-column: 4/5;
}
.li-11 {
grid-row: 2/3;
grid-column: 5/7;
}
.li-12 {
grid-row: 2/3;
grid-column: 7/8;
}
.li-13 {
grid-row: 2/3;
grid-column: 8/10;
}
.htu-span {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.htu-li {
width: 100%;
padding-top: 20px;
list-style: none;
}
.htu-li img {
width: 100%;
border: solid 1px #ffffff;
margin: 0 auto;
}
.htu-li02 {
/* width: calc(100%/4); */
padding: 20px 0 0 0;
list-style: none;
}
.htu-li02 img {
width: 100%;
border: solid 1px #ffffff;
margin: 0 auto;
}
.dli-caret-circle-fill-right {
display: inline-block;
vertical-align: middle;
color: #ffffff;
line-height: 1;
position: relative;
width: 4vw;
height: 4vw;
background: currentColor;
border-radius: 50%;
box-sizing: content-box;
}
.dli-caret-circle-fill-right::before {
content: '';
color: #136CBC;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 1vw 1.5vw;
border-left-color: currentColor;
border-right: 0;
transform: translateX(15%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

.PFFrentlink-box {
width: 100%;
}
.PFFrentlink-box a {
text-decoration: none;
}
.PFFrentlink {
width: 75%;
max-width: 350px;
padding: 1em;
background-color: #ffffff;
margin: 50px auto 0 auto;
text-align: center;
border-radius: 30px;
}
.PFFrentlink p {
color: #00838f;
text-decoration: none;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.25em;
}

/* 質問 */
.cp_qa .cp_actab label {
font-weight: bold;
line-height: 1.6em;
position: relative;
display: block;
margin: 0 auto;
padding: 1em 2em 1em 2.5em;
cursor: pointer;
text-indent: 1em;
border-radius: 0.5em;
background: rgba(27, 37, 56, 0.1);
}

.cp_qa .cp_actab label::before {
font-family: serif;
font-size: 1.5em;
margin-left: -2em;
padding-right: 0.5em;
content: 'Q';
}

.cp_qa .cp_actab label:hover {
transition: all 0.3s;
color: #00838f;
}

/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
font-size: 1.7em;
font-weight: bold;
line-height: 2em;
position: absolute;
top: 0;
right: 0;
content: '\02B';
display: inline-block;
width: 2em;
height: 2em;
-webkit-transition: transform 0.4s;
transition: transform 0.4s;
}

/* 答え */
.cp_qa .cp_actab .cp_actab-content {
position: relative;
overflow: hidden;
max-height: 0;
padding: 0 0 0 2.5em;
-webkit-transition: max-height 0.2s;
transition: max-height 0.2s;
border-radius: 0 0 0.5em 0.5em;
}

.cp_qa .cp_actab .cp_actab-content::before {
font-family: serif;
font-size: 1.5em;
position: absolute;
margin: 0.4em 0 0 -1em;
padding: 0;
content: 'A';
}

.cp_qa .cp_actab .cp_actab-content p {
margin: 1em 1em 1em 0;
}

/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked~.cp_actab-content {
max-height: 40em;
border: 10px solid rgba(27, 37, 56, 0.1);
}

/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked~label {
color: #00838f;
border-radius: 0.5em 0.5em 0 0;
}

/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked+label::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}

/*-アクセス-*/
.tab_item {
color: #136CBC;
background-image: linear-gradient(-45deg, #fff 25%, rgba(19,108,188, 0.1) 25%, rgba(19,108,188, 0.1) 50%, #fff 50%, #fff 75%, rgba(19,108,188, 0.1) 75%, rgba(19,108,188, 0.1));
}
.tab_item3 {
font-size: 1.7rem;
line-height: 2.9rem;
}
.tabs {
width: 90%;
}
.tab_content {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
height: auto;
min-height: 782px;
}
.pffaccess {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 0 0 0;
}
.pffaccessspan {
display: inline-block;
width: 100%;
text-align: center;
font-size: 21px;
font-weight: bold;
padding: 0 1rem 1rem;
}
.pffaccessp {
width: 78%;
margin: 0 auto;
padding-bottom: 1rem;
}
.pffaccess-box {
display: flex;
width: 100%;
margin: 0 auto;
}
.pffaccess-box02 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.shop-container {
width: 67%;
position: absolute;
right: 0;
}
.calendar-boxpff {
width: 45%;
max-width: 341px;
height: auto;
float: left;
}
.calendar-boxpff p {
display: block;
width: 100%;
height: 40px;
text-align: center;
background-color: #136CBC;
color: #ffffff;
line-height: 40px;
font-weight: bold;
}
#calendar,
#calendar_eki,
#calendar_oki,
#calendar_tamiya {
padding: 5px;
height: auto;
border: solid 1px #aaaccc;
border-top: none;
}
#calendar span {
font-size: inherit !important;
}
.calendar-boxpff #calendar span {
font-size: inherit !important;
}
.calendar-boxpff table.calendar th {
text-align: center;
color: #666666;
}
.calendar-boxpff table.calendar td {
border-bottom: solid 1px #aaaCCC;
text-align: center;
width: 25px;
height: 20px;
vertical-align: middle;
line-height: normal;
}
.calendar-boxpff table.calendar td.xday {
background-color: #ffbbdd;
}
.calendar-boxpff table.calendar td.Sat {
color: #000099;
}
.calendar-boxpff table.calendar td.Sun {
color: #FF0000;
}

.shop-box {
width: 100%;
height: auto;
overflow: hidden;
margin-left: 20px;
}
.shop-boxp {
padding-bottom: 10px;
}
.shop-boxp a {
text-decoration: none;
}
.pff-accessbox {
display: block;
font-size: 30px;
text-align: center;
}
.pff-access {
display: inline-block;
font-size: 21px;
padding-bottom: 0.25rem;
margin-bottom: 0.2rem;
border-bottom: dotted 2px;
font-weight: bold;
}
.shop-box02 .map-box {
width: 100%;
height: 350px;
overflow: hidden;
float: right;
padding-bottom: 2rem;

}
.shop-box02 {
width: 100%;
margin-top: 0;
margin-bottom: 0;
padding-right: 1.5rem;

}

/*-来店予約-*/
#otoiawase .step-box li.active {
background-color: #136CBC;
}
#otoiawase .step-box li.active::after {
content: "";
width: 0;
height: 0;
border-top: 16px solid transparent;
border-left: 16px solid #136CBC;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
position: absolute;
right: -31px;
top: 50%;
margin-top: -16px;
}
#otoiawase #formWrap dt {
color: #136CBC;
}
#otoiawase #formWrap dt::before {
display: inline-block;
width: 10px;
height: 2.8rem;
vertical-align: middle;
content: "";
margin-right: 1rem;
border-radius: 5px;
background-color: #136CBC;
}
#otoiawase #formWrap dt span{
background-color: #EA5511;
}
#otoiawase .privacy .privacy-title {
background-color: #136CBC;
}
#otoiawase .privacy .privacy-area h3 {
color: #136CBC;
}
#otoiawase #formWrap form .button-box input[type="submit"] {
background-color: #136CBC;
}
#otoiawase #formWrap form .button-box input {
color: #136CBC;
border: solid 1px #136CBC;
}
#otoiawase #formWrap table th {
display: block;
width: 35%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
float: left;
padding: 1em;
line-height: 2.8em;
color: #136CBC;
text-align: left;
}
#otoiawase #formWrap input[type="submit"] {
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
width: 300px;
height: 60px;
box-sizing: border-box;
background-color: #136CBC;
font-size: 1.2em;
color: #ffffff;
text-align: center;
line-height: 60px;
border-radius: 5px;
text-decoration: none;
border: solid 1px #136CBC;
margin: 4rem auto 0;
}
#otoiawase #formWrap input[type="button"] {
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
width: 300px;
height: 60px;
box-sizing: border-box;
background-color: #ffffff;
font-size: 1.2em;
color: #136CBC;
text-align: center;
line-height: 60px;
border-radius: 5px;
text-decoration: none;
border: solid 1px #136CBC;
margin: 4rem auto 0;
}
#otoiawase #content01 .back-box a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 250px;
color: #ffffff;
background-color: #EA5511;
border-radius: 7px;
font-size: 1.4rem;
font-weight: bold;
margin: 40px auto;
padding: 2rem 0;
text-decoration: none;
}
#header>ul>li:hover>a::after {
background-color: #e5001b00;
width: 100%;
}

/*-SNS-*/
#PFFsns .PFF-sns {
        width: 94vw;
        max-width: 1200px;
        overflow: hidden;
        margin: 0 auto;
        padding-top: 50px;
}
#PFFsns .content-title {
        padding-bottom: 24px;
}
#PFFsns .sns-box {
        width: 100%;
        display: flex;
        justify-content: center;
}
#PFFsns .sns-box li {
        list-style: none;
} 
#PFFsns .sns-box .fb-page {
        width: 500px;
        height: auto;        
}
#PFFsns .fb_iframe_widget {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 90px;
}
#container_width span {
        width: 500px;
}
#PFFsns .sns_insta {
        width: calc(100% - 500px);
        height: auto;
}
#PFFsns .insta_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        float: right;
} 
#PFFsns .insta_list li {
        width: calc(30vw - (500px/3));
        max-width: calc(650px/3);
        height: calc(30vw - (500px/3));
        max-height: calc(650px/3);
        margin: 0.5rem;
}
#PFFsns .insta_list img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

@media only screen and (max-width: 1124px) {
#PFFsns .sns-box {
        display: block;
}
#PFFsns .sns-box .fb-page {
        width: 94vw;
        max-width: 700px;
}
#PFFsns .fb_iframe_widget {
        width: 300px;
        margin: 0 auto;
}
#PFFsns .sns_insta {
        width: 100%;
        max-width: 700px;
        padding: 0;
        margin: 0 auto;
}
#PFFsns .insta_list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto;
}
#PFFsns .insta_list li {
        width: calc(94vw/3);
        height: calc(94vw/3);
        margin: 0;
}
.shop-container {
width: 58%;
}
}


@media only screen and (max-width: 1024px) {
.toptext01 {
font-size: 42px;
margin: 0 2rem;
}
.foreigners-toptext{
top: 58%;
}
.categoryboxPFF {
height: 36vw;
width: 80%;
}
.PFF-title{
padding-top: 0%;
width: 70%;
}
.foreigners-contactbox01a {
padding: 5em 30px 6em;
}
.foreigners-contactbox01b {
padding: 5em 30px 6em;
}
.faqtoptext {
top:70%
}
.foreigners-toptext img {
margin: 0 2rem;
}
.tab_item3 {
font-size: 1.8rem;
line-height: 1.45rem;
}
}
@media only screen and (max-width: 890px) {
.tab_item3 {
font-size: 1.5rem;
line-height: 1.45rem;
}
.shop-container {
width: 50%;
}
}

@media only screen and (max-width: 786px) {
.br-sp {
        display: block;
}
/*-電話-*/
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
/*-ヘッダー-*/
#header .header-logo- {
width: 100%;
position: absolute;
top:0;
left: 0;
}
#header .logo-box- a {
width: 60vw;
max-width: 380px;
min-width: 280px;
margin-left: 2.5%;
}
#header .header-menu li a .head-icon-box {
width: 100%;
height: 80px;
background-size: 50px auto;
background-position: center bottom 1.5rem;
background-repeat: no-repeat;
margin: 1rem 0 -10px 0;
}
#header .head-google-box {
margin-bottom: -5px;
}
#header .header-container {
display: block;
width: 100%;
}
#header .logo-box- {
width: 100%;
height: 100px;
padding-top: 10px;
}
#header .header-menu {
display: block;
width: 100%;
background-color: #FFFFFF;
}
#header .header-menu li {
max-width: 300px;
margin-bottom: -10px;
}

/*TOP画像上文字*/
.foreigners-toptext {
top: 55%;
}
.foreigners-toptext img {
margin: 0 1rem;
width: 30%;
}
.toptext01 {
font-size: 36px;
line-height: 1;
margin: 0 1rem;
}

/*-TOP-*/
.foreigners-topbox {
margin-top: 150px;
height: 470px;
}
.scrolldown {
margin: 0 auto;
padding-top: 295px;
}
/*-main-*/
.back {
height: 76vw;
}
.scrolldown span {
font-size: 10px;
}
.dli-arrow-down {
bottom: -2.8rem;
}
.foreigners-h2text {
font-size: 21px;
}
.foreigners-text02 {
width: 64%;
}
.foreigners-text02box p{
font-size: 14px;
}
.foreigners-message-text {
padding-top: 115px;
}
.category {
width: 25%;/* 未対応ブラウザ用フォールバック */
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
.category01 {
height: 10.5vw;
}
.category01 p {
height: 10vw;
}
.PFF-title {
margin-top: 0%;
}
.PFF-titlep2 {
font-size: 14px;
line-height: 2rem;
padding-top: 10px;
}
.PFF-titlep a {
font-size: 21px;
}
.foreigners-contactbox01a{
padding: 4em 20px 5em;
}
.foreigners-contactbox01b{
padding: 4em 20px 5em;
}
.foreigners-contactbox02img img {
width: 4em;
}
.contact-text {
font-size: 1.8rem;
}
/*-topics-*/
.topics-content2 {
background-color: #ffffff;
margin-bottom: -85px;
}
.topics-box {
width: 100%;
margin: 50px auto;
}
.topics-box .article {
width: 90%;
}
.topics-box .article dt {
width: max-content;
padding: 0.5rem 1.5rem;
float: none;
margin-bottom: 1rem;
}
.topics-box .article dd {
width: 100%;
padding-left: 0;
}
.topics-btn {
margin: 0 4% 0 auto;
}
.content-title {
margin-top: 0;
}
.content-title h2{
font-size: 21px;
}
.topics-list {
margin-top: 0;
}

.PFF-faq {
padding-bottom: 10px;
}
.faqtext {
font-size: 14px;
}
.foreigners-faqbox,
.faqslideBox,
.faqitem1 {
height: 250px;
}

.back02 {
height: 187px;
}
.back0faq {
height: 200px;
}
.cp_qa {
padding-top: 1.3rem;
}
.foreigners-faqtoptext h4 {
font-size: 28px;
top: 35%;
}
.faqtoptext {
font-size: 16px;
top: 60%;
}
/*-ご利用の流れ-*/
.hut-box01-pc {
display: none;
}
.hut-box01sp p {
font-size: 14px;
}
.hut-box01-sp {
display: block;
margin: 0 auto;
}
.htu-span-pc {
display: none;
}
.htu-li {
display: flex;
align-items: center;
border-bottom: solid 1px #ffffff;
}
.htu-li02 {
display: flex;
align-items: center;
border-bottom: solid 1px #ffffff;
}
.htu-li img {
width: 25%;
margin: 0;
border-bottom: 0;
}
.htu-li02 img {
width: 25%;
margin: 0;
border-bottom: 0;
}
.htu-li p{
padding-left: 20px;
}
.htu-li02 p {
padding-left: 20px;
}
#content {
overflow: hidden;
float: none;
}
.tab_item {
font-size: 1.5rem;
}

.PFF-faq-linebox .PFF_line02 {
        height: 100px;
}
.PFF-faq-linebox .PFF_line03 {
        height: 57px;
        bottom: 0;
}

.header-top h1 {
        z-index: 0;
}
}

@media only screen and (max-width: 640px) {
.back {
height: 80vw;
}
.category01 p {
font-size: 1.3rem;
}
/*-アクセス-*/
.pffaccess-box {
display: block;
}
.calendar-boxpff #calendar table,
.calendar-boxpff #calendar_eki table,
.calendar-boxpff #calendar_oki table,
.calendar-boxpff #calendar_tamiya table {
width: 100%;
}
.calendar-boxpff {
width: 100%;
float: none;
font-size: 1.8rem;
margin-bottom: 2rem;
}
.calendar-boxpff p {
width: 100%;

}
.pffaccess-box02 {
width: 80%;
}
.shop-box02 .map-box {
width: 100%;
}
.shop-container {
width: 100%;
position: relative;
}
.shop-box {
margin-left: 0;
}
.shop-box02 {
padding-right: 0;
}
}

@media only screen and (max-width: 568px) {
#header .logo-box- a {
padding-top: 15vw;
min-width: 60vw;
margin-left: 3vw;
}
/*-main-*/
.back {
height: 83.5vw;
}
.category {
width: 50%;/* 未対応ブラウザ用フォールバック */
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
.category01 {
height: 15.5vw;
border: #d3e9f400;
}
.category01 p {
font-size: 1.5rem;
border: none;
box-shadow: 0 0 10px rgba(193, 186, 183, .5);
border-radius: 10px;
height: 15vw;
}
.rent-sp {
display: block;
width: 80%;
margin: auto;
border-bottom: solid 2px #136CBC;
color: #136CBC;
}
.rent-sp p{
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-top: 2vw;
}
.categoryboxPFF{
height: 45vw;
}
.PFF-title {
width: 75%;
}
.foreigners-contactbox01 {
display: block;
width : 60%;
}
.foreigners-contactbox01a{
padding: 4em 20px 1em;
}
.foreigners-contactbox01b{
padding: 1em 20px 4em;
}
.faqtoptext{
top: 60%;
}
.foreigners-faqtoptext h4{
top:37%;
}
.PFF-faq {
        width: 94%;
        height: 100px;
}
.PFF-faq_text {
width: 90%;
}
.PFF-faq img {
height: 100px;
}
.faqslideBox {
height: 250px;
}
.faqitem1 {
height: 250px;
}
.PFF-faq-linebox {
        width: 94%;
        height: 100px;
        margin: 0 auto 0.5rem;
}
}

@media only screen and (max-width: 500px) {
#header .logo-box- a {
width: 60%;
padding-top: 20vw;
margin-left: 3.3vw;
}
/*-TOP-*/
.foreigners-topbox {
height: 750px;
margin-top: 0;
}
.back {
height: 165vw;
}
.back02 {
height: 150px;
}
.scrolldown {
padding-top: 440px;
}
.foreigners-toptext {
top:60%
}
.foreigners-message-text {
padding-top: 48px;
padding-bottom: 0;
}
.foreigners-text02 {
width: 70%;
}
.foreigners-text02-content {
padding-top: 10%;
padding-bottom: 10%;
margin: 0 auto 4rem;
}
.item1 {
width: auto;
}
.foreigners-toptext {
display: block; 
margin: 0 auto;
width: 100%;
text-align: center;
}
.foreigners-toptext img {
margin: 0 auto;
}
.toptext01 {
width: 70%;
margin: 0 auto;
padding-top: 0.5em;
text-align: left;
font-size: 32px;
line-height:1.5em;
}
.foreigners-contact-container {
margin-top: 50px;
}
.PFFrentlink {
width: 90%;
margin: 45px auto 0 auto;
border-radius: 11px;
}
.PFF-faq-linebox .PFF_line03 {
        display: none;
        bottom: 0;
}
}

@media only screen and (max-width: 400px) {
.pc-2 {
        display: none;
}
.br-sp2 {
        display: block;
}
.faqtext {
line-break: auto;
width: 76%;
}
.faqtoptext {
overflow-wrap: anywhere;
padding: 0 20px;
text-align: left;
}
#header .header-menu-text- {
font-size: 14px;
}
}

@media only screen and (max-width: 320px) {
.foreigners-toptext {
top: 58%;
}
.toptext01 {
line-height: 3.5rem;
}
.category01 p {
font-size: 1.3rem;
}
.faqtext {
width: 78%;
}
}

@media screen and (max-width:290px) {
#header .header-menu-text- {
font-size: 12px;
}
}