@charset "utf-8";
/* maintenanse.css */

/* 　↓以下、style.cssに記載済み
-------------------------------------------------- */

.ec-layoutRole {
width: 100%;
transition: transform 0.3s;
background: #fff; 
}
.ec-layoutRole .ec-layoutRole__contents {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1000px;
padding: 0 10px;
display: flex;
flex-wrap: nowrap; 
}
.ec-layoutRole .ec-layoutRole__main {
width: 100%; 
}

/* ↑ここまで
-------------------------------------------------- */


/*-------------------------------------------------
以下より、バンド調整無料ページのCSS
-------------------------------------------------*/

@media all and (max-width : 1000px ){
.ec-layoutRole .ec-layoutRole__contents {
padding: 0;
}
.ec-layoutRole .ec-layoutRole__main {
padding: 0 20px;
}
}

/*-------------------------------------------------
改行設定
-------------------------------------------------*/

@media screen and (min-width: 768px) {
.pc-hidden{
display:none;
}
}

@media screen and (max-width : 480px ){
.sp-hidden{
display:none;
}
}

/*-------------------------------------------------
デフォルト指定クリア
-------------------------------------------------*/

p {
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
dl {
margin-block-start: 0;
margin-block-end: 0;
}
dd {
margin-inline-start: 0px;
}
figure {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
ul {
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}


/*-------------------------------------------------
intro
-------------------------------------------------*/

html {
scroll-padding-top: 88px;
scroll-behavior: smooth;
}
.intro_title {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
letter-spacing: 0.1em;
padding-top:60px;
}
.intro_title dt {
font-family: 'Libre Baskerville', serif;
font-weight: 400;
font-size: 22px;
line-height: 100%;
margin-bottom: 10px;
}
.intro_title dd {
font-family: "Noto Serif JP", serif;
font-weight: 400;
font-size: 13px;
color: #999999;
margin-inline-start: 0px;
}
.maintenanse_img {
width: 51.02%;
}
.maintenanse_img img {
width: 100%;
}
.maintenanse_txt_box {
width: 43.37%;
}
.maintenanse_txt_box dt {
font-family: "Noto Serif JP", serif;
font-weight: 400;
letter-spacing: 0.15em;
font-size: 20px;
margin-bottom: 20px;
}
.maintenanse_txt_box dd {
font-size: 14px;
line-height: 200%;
letter-spacing: 0.1em;
}
.maintenanse_txt_box dd span {
font-weight: 700;
}
.intro_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
}

@media all and (max-width : 767px ){
.intro_title {
margin-bottom: 20px;
padding-top:30px;
}
.intro_title dt {
font-size: 18px;
margin-bottom: 10px;
}
.intro_title dd {
font-size: 10px;
}
.maintenanse_img {
width: 100%;
margin-bottom: 20px;
}
.maintenanse_txt_box {
width: 100%;
}
.maintenanse_txt_box dt {
letter-spacing: 0.15em;
font-size: 18px;
margin-bottom: 20px;
}
.maintenanse_txt_box dd {
font-size: 14px;
line-height: 180%;
}
.intro_box {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
}

/*-------------------------------------------------
main content
-------------------------------------------------*/

.service_title {
font-family: "Noto Serif JP", serif;
font-weight: 400;
letter-spacing: 0.15em;
font-size: 22px;
margin-bottom: 20px;
display: block;
text-align: center;
}
.service_txt {
font-size: 14px;
display: block;
text-align: center;
letter-spacing: 0.1em;
line-height: 180%;
margin-bottom: 50px;
}
.brand_list {
padding: 23px 40px 16px;
background: #F5F5F5;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 22px;
margin-bottom: 100px;
}
.brand_list li {
line-height: 100%;
margin-right: 24px;
margin-bottom: 10px;
display: block;
}
.brand_list li:last-child {
margin-right: 0px;
}
.brand_list li a {
line-height: 100%;
text-decoration: underline;
display: block;
color: #000;
}
.brand_list li a:hover {
text-decoration: none;
}
.brand_list_sec {
width: 100%;
padding-bottom: 22px;
border-bottom: solid 1px #ddd;
margin-bottom: 5px;
}
.brand_alphabet {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 30px;
color: #111;
line-height: 100%;
display: block;
text-align: center;
}
.brand_box {
width: calc(50% - 100px);
padding: 20px 0 20px;
}
.brand_box a {
text-decoration: none;
}
.brand_box:nth-child(odd){
padding-left: 100px;
}
.brand_box:nth-child(even){
padding-left: 80px;
padding-right: 20px;
}

@media all and (max-width : 1024px ){
.brand_box:nth-child(odd){
padding-left: 60px;
}
.brand_box:nth-child(even){
padding-left: 60px;
}
}

.brand_box_item {
display: flex;
align-items: center;
width: 100%;
}
.brand_box .brand_thum {
max-width: 105px;
height: auto;
object-fit: cover;
margin-right: 30px;
}
.brand_name_en {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.1em;
color: #111;
line-height: 100%;
margin-bottom: 10px;
transition: all 0.5s;
}
.brand_name_jp {
font-size: 12px;
font-weight: 500;
color: #999;
line-height: 100%;
transition: all 0.5s;
}
.brand_box_wrap {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: solid 1px #ddd;
margin-bottom: 70px;
}
.brand_box a:hover .brand_name_en {
color: #A48A5F;
transition: all 0.5s;
}
.brand_box a:hover .brand_name_jp {
color: #666;
transition: all 0.5s;
}


/* スマートフォン
-------------------------------------------------- */

@media all and (max-width : 767px ){
.service_title {
font-size: 18px;
letter-spacing: 0.1em;
margin-bottom: 20px;
text-align: left;
}
.service_txt {
font-size: 14px;
text-align: left;
line-height: 180%;
margin-bottom: 40px;
}
.brand_list {
padding: 15px 15px 10px;
font-size: 16px;
margin-bottom: 40px;
}
.brand_list li {
margin-right: 15px;
}
.brand_list_sec {
padding-bottom: 15px;
margin-bottom: 5px;
}
.brand_alphabet {
font-size: 22px;
}
.brand_box {
width: calc(50% - 5px);
padding: 15px 0 15px;
}
.brand_box:nth-child(odd){
padding-left: 5px;
}
.brand_box:nth-child(even){
padding-left: 5px;
padding-right: 0px;
}
.brand_box .brand_thum {
max-width: 50px;
height: auto;
object-fit: cover;
margin-right: 15px;
}
.brand_name_en {
font-size: 14px;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.brand_name_jp {
font-size: 10px;
letter-spacing: 0.05em;
line-height: 110%;
}
.brand_box_wrap {
padding-bottom: 5px;
margin-bottom: 35px;
}
}