body {
font-family:"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ ",Meiryo,"MS ゴシック",sans-serif;
word-break: break-all;
}

.after_service {
overflow: hidden;
color: #333;
}

.afterservice_title {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}

.af_fade_img {
position: absolute;
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}

.af_fade_img_up {
position: absolute;
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}

.af_fade_img_down {
position: absolute;
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
}

.af_fade_no {
position: absolute;
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*----------------------------------------
 af_main_v
----------------------------------------*/

.af_main_v {
background-color: #e4eff1;
color: #fff;
transition: background-color 1.9s cubic-bezier(0.215, 0.61, 0.355, 1);
width: 100%;
margin: 0 auto 0 auto;
}

.js-bg-change {
background-color: #FFF5E6;
}

.af_main_v_inner {
position: relative;
display: flex;
flex-wrap: wrap;
overflow: hidden;
width: 100%;
min-height: 100vh;
}

.af_main_v_height {
width: 0;
}

.af_main_v_height article {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}

.af_main_v_item {
width: 100%;
}

.af_main_v_item #af_main_v_item_js {
height: 100vh;
}

.af_main_v_item_inner {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
}

.af_main_img_1{
position: absolute;
top: 0;
left: 0;
width: 25%;
}

.af_main_img_2{
position: absolute;
top: 0;
right: 0;
width: 25%;
}

.af_main_img_3{
position: absolute;
top: 0;
left: 50px;
width: 35%;
}

.af_main_img_4{
position: absolute;
top: 0;
right: 50px;
width: 35%;
}

.af_main_img_5{
position: absolute;
bottom: 20vh;
left: 0;
width: 300%;
height: 30vh;
background-image: url(../img/afterservice05.png);
background-repeat: repeat-x;
background-position: bottom center;
background-size: contain;
}

.af_main_img_6{
position: absolute;
bottom: 20vh;
right: 0;
width: 300%;
height: 30vh;
background-image: url(../img/afterservice06.png);
background-repeat: repeat-x;
background-position: bottom center;
background-size: contain;
}

.af_main_img_7{
position: absolute;
bottom: 15vh;
left: 0;
width: 100%;
height: 40vh;
background-image: url(../img/afterservice07.png);
background-repeat: repeat-x;
background-position: bottom center;
background-size: contain;
}

.af_main_img_9{
position: absolute;
bottom: 10vh;
right: 10%;
width: 250px;
}

.af_main_img_10{
width: 30%;
padding: 7% 0 0 0;
}

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

.af_main_img_10{
width: 35%;
}

}


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

.af_main_img_10{
width: 50%;
}

}

/*----------------------------------------
 af_lead
----------------------------------------*/

.af_lead {
position: relative;
background-color: #FFF5E6;
top: -200px;
margin-bottom: -200px;
}

.af_lead .border__x {
width: 2px;
height: 300px;
background-color: #bc9d6c;
position: absolute;
left: 50%;
top: -100px;
transform: translateX(-50%);
animation: lineAnime 2.5s cubic-bezier(0.19, 1, 0.22, 1) 0s infinite;
}

.af_lead_inner {
width: 96%;
max-width: 1244.444px;
padding:0 62.222px;
margin: 0 auto;
}

.af_lead_box {
width: 50%;
min-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
padding: 200px 0;
}

.af_lead_box p {
font-size: 17px;
padding: 30px 0;
letter-spacing: 2px;
}

.af_lead_box img{
width: 70%;
height: auto;
}


.top_af_lead {
font-size: 25px !important;
line-height: 2;
padding: 20px 0;
font-weight: bold;
}

.af_lead .af_lead_img_1 {
width: 25%;
top: 20%;
left: 5%;
}

.af_lead .af_lead_img_2 {
width: 20%;
right: 5%;
top: 15%;
}


@keyframes lineAnime {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  25% {
    clip-path: inset(0 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}

/*----------------------------------------
 af_top_afterservice
----------------------------------------*/

.af_top_afterservice {
width: 100%;
min-height: 100vh;
background-image: url(../img/afterservice_bg04.jpg);
background-size: 100% auto;
position: relative;
padding-bottom: 200px;
position: relative;
top: -2px;
}

.af_top_afterservice_inner {
width: 96%;
max-width: 1244.444px;
padding:70px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.af_top_afterservice_img_1{
width: 20%;
margin: 0 0 10px 0;
}

.af_top_afterservice_img_2{
width: 50%;
}

.af_top_afterservice_img_3 {
width: 30%;
left: 0;
top: 30%;
}

/*----------------------------------------
 af_top_iedoc
----------------------------------------*/

.af_top_iedoc {
width: 100%;
min-height: 100vh;
background-image: url(../img/afterservice_bg06.jpg);
background-size: 100%;
position: relative;
top: -1px;
bottom: -1px;
}

.af_top_iedoc_inner {
width: 96%;
max-width: 1244.444px;
padding:70px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.af_top_iedoc_img_1{
width: 20%;
margin: 0 0 10px 0;
}

.af_top_iedoc_img_2{
width: 50%;
}

.af_top_iedoc_img_3 {
width: 30%;
right: 0;
top: 20%;
}

.af_top_line {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
}

/*----------------------------------------
 af_top_hrs
----------------------------------------*/

.af_top_hrs {
width: 100%;
/*min-height: 100vh;*/
background-image: url(../img/afterservice_bg02.jpg);
background-size: 100%;
position: relative;
top: -1px;
bottom: -1px;
}

.af_top_hrs_inner {
width: 96%;
max-width: 1244.444px;
padding:70px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.af_top_hrs_img_1{
width: 20%;
margin: 0 0 10px 0;
}

.af_top_hrs_img_2{
width: 50%;
}

.af_top_hrs_img_3 {
width: 25%;
right: 0;
top: 20%;
}

/*----------------------------------------
 top_contents
----------------------------------------*/

.af_top_contents_title{
width: 40%;
margin: 20px 30% 0 30%;
}

.af_top_contents_title p{
width: 100%;
padding: 20px 0;
background-color: #fff;
display: block;
text-align: center;
font-size: 20px;
line-height: 1.8;
font-weight: bold;
}


.af_top_contents_title:before{
content: "";
display: inline-block;
background: url(../img/afterservice22.png);
width: 100%;
height: 12px;
}

.af_top_contents_title:after{
content: "";
display: inline-block;
background: url(../img/afterservice22.png);
width: 100%;
height: 12px;
}

.af_top_contents_text{
width: 40%;
margin: 40px 30% 0 30%;
}

.af_top_contents_text p{
width: 100%;
display: block;
text-align: left;
font-size: 15px;
line-height: 1.8;
}

.af_top_contents_btn{
margin: 80px 0 0 0;
}

.af_top_contents_btn a{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
border-radius: 15px;
padding: 15px 35px;
color: #fff;
text-decoration: none;
font-size: 17px;
font-weight: bold;
transition : all 0.5s ease 0s;
}

.af_top_contents_btn a:after{
font-family: 'Material Symbols Outlined';
content: "\e941";
font-weight: 300;
font-size: 20px;
line-height: 20px;
width: 20px;
height: 20px;
background-color: #fff;
padding: 7px;
color: #333;
border-radius: 50%;
margin: 0 0 0 35px;
display: flex;
justify-content: center;
align-items: center;
}

.af_top_contents_btn a:hover{
background-color: #e72;
}

.af_top_contents_btn a:hover:after{
color: #e72;
}

/*----------------------------------------
 page
----------------------------------------*/

#after_service p.af_cap{
font-size: 10px;
padding: 10px 0 0 0;
}

#after_service p.section_title{
width: 100%;
display: block;
font-size: 25px;
font-weight: bold;
text-align: center;
margin: 0 0 80px 0;
}

#after_service p.section_title span{
display: block;
font-size: 17px;
line-height: 2;
font-weight: normal;
padding: 20px 0 0 0;
}

span.af_cap{
font-size: 10px !important;
padding: 10px 0 0 0;
}

#after_service p.section_sub{
display: inline-block;
font-size: 15px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
}

#after_service p.section_sub span{
display: block;
font-size: 22px;
padding: 10px 30px;
margin: 5px 0 0 0;
}

#after_service p.section_text{
width: 100%;
display: block;
font-size: 15px;
line-height: 2;
}

#after_service p.section_text span.big{
display: block;
font-size: 22px;
line-height: 2;
font-weight: bold;
}

.section_contents_text{
width: 100%;
}

.section_contents_text p{
width: 100%;
padding: 10px 0;
display: block;
text-align: center;
font-size: 20px;
line-height: 1.8;
font-weight: bold;
}

.section_contents_text:before{
content: "";
display: inline-block;
background: url(../img/afterservice23.png);
width: 100%;
height: 12px;
}

.section_contents_text:after{
content: "";
display: inline-block;
background: url(../img/afterservice23.png);
width: 100%;
height: 12px;
}

#after_service p.section_contents_sub{
display: inline-block;
font-size: 20px;
font-weight: bold;
width: 100%;
}

#after_service p.section_contents_sub .material-symbols-outlined{
position: relative;
top: 5px;
}


/*----------------------------------------
 afterservice
----------------------------------------*/

.afterservice_main {
width: 100%;
background-image: url(../img/afterservice_bg04.jpg);
background-size: 100% auto;
position: relative;
}

.afterservice_main_inner {
width: 96%;
max-width: 1244.444px;
padding:200px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.afterservice_af_main_img_1{
width: 20%;
margin: 0 0 10px 0;
}

.afterservice_af_main_img_2{
width: 50%;
}

.afterservice_af_main_img_3 {
width: 30%;
left: 0;
top: 20%;
position: absolute;
z-index: 100;
}

.afterservice_01{
background-color: #FCF7F7;
}

.afterservice_02{
background-color: #fdf9f1;
}

.afterservice_03{
background-color: #efefef;
}

.afterservice_inner {
width: 96%;
max-width: 1244.444px;
padding:100px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.afterservice_02_box{
width: 100%;
border: 2px solid #750;
border-radius: 20px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #fff9e1;
}

.afterservice_03_box{
width: 80%;
border: 2px solid #750;
border-radius: 20px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #e7f1e9;
}

.afterservice_03_box ul{
width: 100%;
list-style: none;
margin: 20px 0 0 0;
padding: 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}

.afterservice_03_box ul li{
width: 25%;
font-size: 16px;
padding: 0 20px;
margin: 5px 0;
font-weight: bold;
color: #750;
}

.afterservice_03_box ul li:before{
font-family: 'Material Symbols Outlined';
content: "\e835";
font-size: 20px;
line-height: 20px;
position: relative;
top: 3px;
margin: 0 10px 0 0;
}

.afterservice_04_box{
width: 80%;
border: 2px solid #750;
border-radius: 20px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #edf1f5;
}

.afterservice_04_box ul{
width: 100%;
list-style: none;
margin: 20px 0 0 0;
padding: 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}

.afterservice_04_box ul li{
width: 80%;
font-size: 17px;
padding: 0 20px;
margin: 5px 10px;
font-weight: bold;
color: #750;
}

.afterservice_04_box ul li:before{
font-family: 'Material Symbols Outlined';
content: "\e835";
font-size: 20px;
line-height: 20px;
position: relative;
top: 3px;
margin: 0 10px 0 0;
}

.afterservice_nav{
width: 100%;
background-color: #fff;
}

.afterservice_nav ul{
width: 96%;
max-width: 1244.444px;
padding:40px 62.222px;
margin: 0 auto;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.afterservice_nav ul li{
width: 30%;
}

.afterservice_nav ul li a{
width: 100%;
display: block;
transition : all 0.5s ease 0s;
}

.afterservice_nav ul li a:hover{
opacity: 0.7;
}

.hrs_01 .hrs_01_pickup .cap {
	top: 10px;
}

/*----------------------------------------
 hosedock
----------------------------------------*/

.hosedock_main {
width: 100%;
background-image: url(../img/afterservice_bg06.jpg);
background-size: 100% auto;
position: relative;
}

.hosedock_main_inner {
width: 96%;
max-width: 1244.444px;
padding:200px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.hosedock_af_main_img_1{
width: 20%;
margin: 0 0 10px 0;
}

.hosedock_af_main_img_2{
width: 50%;
}

.hosedock_af_main_img_3 {
width: 30%;
left: 0;
top: 20%;
position: absolute;
z-index: 100;
}

.hosedock_inner {
width: 96%;
max-width: 1244.444px;
padding:100px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.hosedock_01{
background-color: #fff7ef;
}

.hosedock_01_box{
width: 80%;
border: 2px solid #750;
border-radius: 20px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #faede1;
}

.hosedock_01_box ul{
width: 100%;
list-style: none;
margin: 20px 0 0 0;
padding: 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}

.hosedock_01_box ul li{
width: 25%;
font-size: 16px;
padding: 0 20px;
margin: 5px 0;
font-weight: bold;
color: #750;
}

.hosedock_01_box ul li:before{
font-family: 'Material Symbols Outlined';
content: "\e835";
font-size: 20px;
line-height: 20px;
position: relative;
top: 3px;
margin: 0 10px 0 0;
}

.hosedock_02_box{
width: 80%;
margin: 80px 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.hosedock_nav ul{
width: 96%;
max-width: 1244.444px;
padding:40px 62.222px;
margin: 0 auto;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.hosedock_nav ul li{
width: 23%;
}

.hosedock_nav ul li a{
width: 100%;
display: block;
transition : all 0.5s ease 0s;
}

.hosedock_nav ul li a:hover{
opacity: 0.7;
}

/*----------------------------------------
 hrs
----------------------------------------*/

.hrs_main {
width: 100%;
background-image: url(../img/afterservice_bg02.jpg);
background-size: 100% auto;
position: relative;
}

.hrs_main_inner {
width: 96%;
max-width: 1244.444px;
padding:200px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.hrs_af_main_img_1{
width: 50%;
}

.hrs_af_main_img_2 {
width: 25%;
right: 5%;
top: 10%;
position: absolute;
z-index: 100;
}


.hrs_inner {
width: 96%;
max-width: 1244.444px;
padding:100px 62.222px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.hrs_01{
background-color: #eff8ff;
}

.hrs_01_box{
width: 80%;
border: 2px solid #750;
border-radius: 20px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #e8f4ff;
}

.hrs_01_box ul{
width: 100%;
list-style: none;
margin: 20px 0 0 0;
padding: 0 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}

.hrs_01_box ul li{
width: 25%;
font-size: 17px;
padding: 10px 10px;
margin: 5px 0;
border-right: 2px dotted #750;
color: #750;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}

.hrs_01_box ul li span{
font-size: 12px;
font-weight: normal;
display: block;
padding: 10px 0;
}

.hrs_01_pickup{
width: 90%;
border-radius: 20px;
padding: 40px;
margin: 40px 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: rgba(255, 255, 255, 0.8);
}

.hrs_nav ul{
width: 96%;
max-width: 1244.444px;
padding:40px 62.222px;
margin: 0 auto;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.hrs_nav ul li{
width: 30%;
}

.hrs_nav ul li a{
width: 100%;
display: block;
transition : all 0.5s ease 0s;
}

.hrs_nav ul li a:hover{
opacity: 0.7;
}


/*----------------------------------------
 af_center_slide
----------------------------------------*/

.af_center_slide{
width: 100%;
margin: 40px auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}

.af_center_slide div.af_center_slide_box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 33%;
}

.af_center_slide .book {
width: 90%;
}

.af_center_slide .book_logo {
    width: 90%;
    font-weight: bold;
    font-size: 14px;
    color: #6d9cc9;
    position: relative;
    top: -10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.af_center_slide .book_logo span {
font-size: 30px;
font-family: "Oswald", sans-serif;
font-weight: 500;
background-color: #fff;
padding: 20px 10px;
margin: 0 10px 0 0;
display: inline-block;
white-space: nowrap;
}

.af_center_slide .slide-arrow {
bottom: 0;
position: absolute;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #fff;
border: 2px solid #6d9cc9; 
border-radius: 50%;
color: #6d9cc9;
transition : all 0.5s ease 0s;
}

.af_center_slide .slide-arrow:hover {
background-color: #6d9cc9;
color: #fff;
}

.af_center_slide .prev-arrow {
left: 50%;
transform: translateX(calc(-50% - 30px));
}

.af_center_slide .next-arrow {
left: 50%;
transform: translateX(calc(-50% + 30px));
}

/*----------------------------------------
 pc/sp
----------------------------------------*/

.pc{
display: block;
}

.sp{
display: none;
}

.af_footer #fixedNav{
display: none;
}


/*----------------------------------------
 entry
----------------------------------------*/

.entry{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: #e7f2f8;
}

.entry_inner{
width: 100%;
max-width: 1280px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}


.entry .request,
.entry .reserve {
position: relative;
overflow:hidden;
margin: 0 20px;
border-radius: 30px;
box-shadow: 0px 8px 8px -6px #999;
}

.entry .request a {
color: #fff;
display: block;
padding: 15px 70px;
font-size: 1.7rem;
letter-spacing: 3px;
background: #da9127;
transition : all 0.5s ease 0s;
}

.entry .request a:hover {
background: #a67c3f;
box-shadow: none;
}

.entry .reserve a {
color: #fff;
display: block;
padding: 15px 70px;
font-size: 1.7rem;
letter-spacing: 3px;
background: #009a5b;
transition : all 0.5s ease 0s;
}


.entry .reserve a:hover {
background: #0b7349;
box-shadow: none;
}


.entry_info{
width: 70%;
padding: 20px;
background-color: #fff;
margin: 0 15% 40px 15%;
}

.entry_info h3{
font-size: 2rem;
}