@charset "UTF-8";

/* CSS Document */


/*PC*/
@media print, screen and (min-width: 768px) {

.service_wrap {
position: relative;
margin: 0 auto 160px;
letter-spacing: .04em;
}


.service_wrap_tit {
line-height: 1.5;
margin: 0 0 80px;
padding: 12px 0 0;
border-top: 1px solid #171717;
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}

.service_wrap_inner {
display: flex;
justify-content: space-between;
margin: 0 0 80px;
}

.service_wrap_inner_box1 {
position: relative;
width: 44%;
}

.service_wrap_inner_box2 {
position: relative;
width: 56%;
}

.service_wrap_inner_box1 .s_ttl{
line-height: 1.4;
font-size: 32px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.service_wrap_inner_box2 .s_txt{
line-height: 2;
color: #171717;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
letter-spacing: .04em;
text-align: justify;
}

.service_wrap_inner_box2 ul{
margin-top: 30px;
}
.service_wrap_inner_box2 ul li{
margin-top: 20px;
line-height: 2;
color: #171717;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
letter-spacing: .04em;
}
    
.service_wrap_inner_box2 .icon_flex{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.service_wrap_inner_box2 .icon_flex li{
width: 13%;
    }
    
.service_wrap_inner_box2 .icon_flex li img{
max-width: 100%;
    }

.service_wrap_inner_box2 .s_main {
margin: 80px 0 0;
padding: 0;
font-style: normal;
font-weight: normal;
}

.service_wrap_inner_box2 .s_main dt {
margin: 0 0 20px;
font-size: 18px;
font-weight: bold;
}

.service_wrap_inner_box2 .s_main dd {
line-height: 2;
color: #171717;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
letter-spacing: .04em;
text-align: justify;
padding-bottom: 10px;
}
    
.service_wrap_inner .btn{margin: 20px auto 0 0;}

.service_results {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin:0;
padding:0;
position: relative;
width: 95%;
margin: 0 auto;
}

.service_results_box{
border-right: 1px solid #fff;
position: relative;
overflow: hidden;
}

.service_results_box a,
.service_results_box {
display: block;
position: relative;
overflow: hidden;
color: #fff;
}

.service_results_box a::before,
.service_results_box::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 60%,rgba(0, 0, 0, 0.2) 100%);
z-index: 1;
transition: .3s;
}

.service_results_box a .service_img {
}

.service_results_box a .service_img img,
.service_results_box .service_img img {
width: 100%;
height: auto;
transition: .3s;
}

.service_results_box a .service_txt,
.service_results_box .service_txt {
position: absolute;
bottom: 0;
left: 0;
line-height: 1.5;
z-index: 10;
padding: 20px;
}

.service_results_box a .service_txt_sub,
.service_results_box .service_txt_sub {
font-size: 12px;
font-style: italic;
}

.service_results_box a .service_txt_main,
.service_results_box .service_txt_main {
position: relative;
font-size: 24px;
transition: .3s;
}

.service_results_box a .service_txt_main::before,
.service_results_box .service_txt_main::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: scale(0, 1);
transform-origin: left top;
transition: .3s;
}


.btn_more {
  margin: 6.125em auto 0;
}



/*store
----------------------------*/
.store .cont_tit { font-size: 1.4em; margin-bottom: 50px; line-height: 1.3; font-weight: 900; text-align: center; }
.store .cont_tit .sub { display: block; font-size: 1.4rem; color: #ccc; text-align: center; }
.store .flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 100px; }
.store .flex_wrap::after { content: ''; display: block; width: 30%; }
.store .flex_wrap:last-of-type { margin: 0; }
.store .flex_wrap li { width: 30%; margin-bottom: 100px; }
.store .flex_wrap li img { width: 100%; margin: auto; }
.store .flex_wrap li h5 { font-size: 1.1em; margin: 10px 0; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.store .flex_wrap li p { font-size: 0.9em; }
.store .flex_wrap li .btn { margin: 20px auto 0; }



/*saron
----------------------------*/
.saron img { width: 100%; margin: auto; }
.saron .cont_tit { font-size: 1.4em; margin-bottom: 50px; line-height: 1.3; font-weight: 900; text-align: center; }
.saron .flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 50px; }
.saron .flex_wrap .imgbox { width: 48%; }
.saron .flex_wrap .txtbox { width: 48%; }
.saron .flex_wrap .txtbox h5 { font-size: 1.1em; margin: 0 0 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }

.saron ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.saron ul::after { content: ''; display: block; width: 30%; }
.saron ul li { width: 30%; }





}



/*sp*/
@media only screen and (max-width: 767px) {

.service_wrap {
position: relative;
margin: 0 auto 60px;
letter-spacing: .04em;
}


.service_wrap_tit {
line-height: 1.5;
margin: 0 0 40px;
padding: 10px 0 0;
border-top: 1px solid #171717;
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}

.service_wrap_inner {
margin: 0 0 40px;
}

    
.service_wrap_inner_box2 .icon_flex{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.service_wrap_inner_box2 .icon_flex li{
width: 13%;
    }
    
.service_wrap_inner_box2 .icon_flex li img{
max-width: 100%;
    }
    
    
    
.service_wrap_inner_box1 {
position: relative;
width: 96%;
margin: 0 auto 30px;
}

.service_wrap_inner_box2 {
position: relative;
width: 96%;
margin: 0 auto;
}

.service_wrap_inner_box1 .s_ttl{
line-height: 1.4;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.service_wrap_inner_box2 .s_txt{
line-height: 2;
color: #171717;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
letter-spacing: .04em;
text-align: justify;
}

.service_wrap_inner_box2 ul{
margin-top: 30px;
}
.service_wrap_inner_box2 ul li{
margin-top: 20px;
line-height: 2;
color: #171717;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
letter-spacing: .04em;
}

.service_wrap_inner_box2 .s_main {
margin: 60px 0 0;
padding: 0;
font-style: normal;
font-weight: normal;
}

.service_wrap_inner_box2 .s_main dt {
margin: 0 0 20px;
font-size: 16px;
font-weight: bold;
}

.service_wrap_inner_box2 .s_main dd {
line-height: 2;
color: #171717;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 300;
letter-spacing: .04em;
text-align: justify;
padding-bottom: 10px;
}

.service_results {
width: 90%;
margin: 0 auto;
}

.service_results_box{
width:100%;
position: relative;
margin: 0 auto;
}

.service_results_box a,
.service_results_box {
display: block;
position: relative;
overflow: hidden;
color: #fff;
}

.service_results_box a::before,
.service_results_box::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 60%,rgba(0, 0, 0, 0.2) 100%);
z-index: 1;
transition: .3s;
}

.service_results_box a .service_img {
}

.service_results_box a .service_img img,
.service_results_box .service_img img {
width: 100%;
height: auto;
}

.service_results_box a .service_txt,
.service_results_box .service_txt {
position: absolute;
bottom: 16px;
left: 16px;
line-height: 1.5;
z-index: 10;
}

.service_results_box a .service_txt_sub,
.service_results_box .service_txt_sub {
font-size: 10px;
font-style: italic;
}

.service_results_box a .service_txt_main,
.service_results_box .service_txt_main {
position: relative;
font-size: 16px;
transition: .3s;
}

.service_results_box a .service_txt_main::before,
.service_results_box .service_txt_main::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: scale(0, 1);
transform-origin: left top;
transition: .3s;
}


.btn_more {
  margin: 40px auto 0;
}


.service_wrap_inner .btn{margin: 20px auto 0 0;}

/*store
----------------------------*/
.store .cont_tit { font-size: 1.4em; margin-bottom: 30px; line-height: 1.3; font-weight: 900; text-align: center; }
.store .cont_tit .sub { display: block; font-size: 1.2rem; color: #ccc; text-align: center; }
.store .flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 80px; }
.store .flex_wrap:last-of-type { margin: 0; }
.store .flex_wrap li { width: 48%; margin-bottom: 80px; }
.store .flex_wrap li img { width: 100%; margin: auto; }
.store .flex_wrap li h5 { font-size: 1.1em; border-bottom: 1px solid #ccc; }
.store .flex_wrap li p { font-size: 0.9em; }



/*saron
----------------------------*/
.saron img { width: 100%; margin: auto; }
.saron .cont_tit { font-size: 1.4em; margin-bottom: 30px; line-height: 1.3; font-weight: 900; text-align: center; }
.saron .flex_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 50px; }
.saron .flex_wrap .txtbox { width: 100%; margin-top: 20px; }
.saron .flex_wrap .txtbox h5 { font-size: 1.1em; margin: 0 0 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }

.saron ul li { margin-bottom: 20px; }



}