@charset "utf-8";

i.section{
color: #000
}

i.section:after{
content: '';

}

span.section_contents{
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #444
}

/*--------------------breadcrumb--------------------*/

header.contents_header{
padding-top: 80px;
}

ol.contents {
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
width: 100%; 
margin: 0px auto;
text-align: right;
padding: 15px 4%
}

ol li{
display:inline-block;
vertical-align: middle
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

a.breadcrumb span{
text-decoration: none;
font-weight: 500;
font-size:12px;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

/*--------------------reason--------------------*/

section#contents_section{
padding: 30px 0px 30px 20px;
position: relative
}

section#background{
padding: 40px 0px 40px 48px;
color: #fff;
position: relative;
}

section#background article:before{
background: #fff
}

section#background i.section:after {
background: #fff
}

section#background:before{
content: '';
position: absolute;
width: 1px;
height: 100%;
background: #fff;
top:0px;
left: 28px;
z-index: 1
}

section#background:after{
content:'';
position: absolute;
width: 100%;
height: 100%;
top:0px;
left: 0px;
background: #000000;
background: linear-gradient(90deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
z-index: 0
}

section.about{
background: url(../img/company/back_mobile.jpg) no-repeat center;
background-size: cover;
color: #fff;
}

section.service01{
background: url(../img/service/service01_mobile.jpg) no-repeat center;
background-size: cover;
color: #fff;
}

section#background i.section{
color: #fff
}

h3.contents_section{
font-size:40px;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
line-height: 1.2;
font-style: normal;
margin-bottom: 30px
}

h3.contents_title{
font-size:40px;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
line-height: 1.2;
font-style: normal;
margin-bottom: 30px;
position: relative;
z-index: 1
}

h4.contents_title{
font-size:18px;
margin-bottom: 60px;
line-height: 1.6;
position: relative;
z-index: 1
}

p.content_lead{
font-size: 14px;
font-weight: 500;
margin-bottom: 40px;
line-height: 1.8;
position: relative;
z-index: 1
}

div.reason_link{
display: none
}

label.reason_link{
width: var(--main-width); 
height: 50px;
display: block;
border:solid 1px #dcdcdc;
position: relative;
border-radius: 5px;
overflow: hidden;
}

label.select:after{
content: '▼';
font-size: 12px;
color: #20529a;
position: absolute;
right: 15px;
top:50%;
transform: translateY(-50%)
}

label.reason_link.mobile.select select {
font-size: 14px;
font-family: "Oswald", sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
}

/*--------------------reason１--------------------*/

section#reason1{
padding: 30px 20px 30px 48px;
background: #ffe100;
position: relative
}

section#reason1:before{
content: '';
width: 1px;
height: 100%;
background: #000;
position: absolute;
left: 28px;
top:0px
}

div.reason{
width: var(--main-width); 
border-top:solid 1px #000;
border-bottom:solid 1px #000;
padding: 30px 0px;
position: relative;
padding-left:40px
}

div.reason:last-of-type{
border-top:none;
}

p.reason{
font-size: 14px;
margin-bottom: 10px;
line-height: 1.6
}

p.reason:last-of-type{
margin-bottom: 0px
}

h4.reason_title{
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff;
position: absolute;
left: -30px;
top:50%;
transform: translateY(-50%);
font-size:13px;
display: flex;
align-items: center;
justify-content: center;
border:solid 1px #000
}

/*--------------------reason2--------------------*/

section#reason2,section#reason3,section#reason4,section#reason5,section#reason6,section#reason7{
padding: 30px 0px 30px 19px;
position: relative;
border-bottom:solid 1px #000
}

section#reason7{
border-bottom:none
}

section#reason2:before,section#reason3:before,section#reason4:before,section#reason5:before,section#reason6:before,section#reason7:before{
content: "";
position: absolute;
background: #f6f6f6;
z-index: -1
}

section#reason2:before,section#reason5:before{
width: var(--main-width); 
height: 80%;
left: -28px;
top:40px;
}

section#reason3:before,section#reason6:before{
width: 90%;
height: 380px;
left: -20px;
top:40px;
}

section#reason4:before,section#reason7:before{
width: 90%;
height: 500px;
left: 0px;
top:0px;
}

ul.contents_wrap{
width: var(--main-width); 
position: relative;
z-index: 0
}

li.contents_wrap_left{
width: 100%;
}

p.reason_txt{
font-weight: 500;
line-height: 1.8;
text-align: justify;
margin-bottom: 30px
}

li.contents_wrap_right{
width: 100%;
}

p.reason_image img{
width: 100%;
height: 100%;
object-fit: cover
}

/*--------------------contact--------------------*/

div.contents_contact_wrap{
width: var(--main-width); 
background: #fff;
margin-bottom: 20px;
border:solid 1px #20529a
}

ul.contact{
width: var(--main-width); 
display: block;
}

ul.contact:last-of-type{
margin-bottom: 40px;
}

li.contact_left{
width: 100%;
}

span.contact_left{
font-size:13px;
background: #205299;
color:#fff;
padding: 7px 12px 7px 12px;
margin-left: 10px;
}

li.contact_right{
width: 100%;
border-bottom: solid 1px #fff;
padding: 20px 0px 20px 0px;
}

div.check{
width: 300px;
margin: 0px auto;
font-size:16px;
font-weight: 100;
margin-bottom: 40px;
}

a.complete{
width: 70%;
height: 50px;
display: block;

background: #28c3d1;
background-size: 22px;
-webkit-appearance: none;
border:none;
color:#fff;
border-radius: 5px;
text-align: center;
line-height: 50px;
margin-top: 20px
}

p.complete{
margin-bottom: 15px;
}

p.complete:last-of-type{
margin-bottom: 60px;
}

/*--------------------company--------------------*/

ul.company{
width: var(--main-width); 
border-bottom:1px solid #D6D6D6;
display: table;
table-layout: fixed;
letter-spacing: 0em
}

ul.company li{
display: table-cell;
padding: 20px 0px;
vertical-align: middle;
font-size: 13px
}

li.company_left{
width: 30%
}

li.company_right{
width: 70%;
font-weight: 500;
line-height: 1.6
}

a.google_map:after{
content: "";
width: 20px;
left: 20px;
background: url(../img/icon/maps-icon.svg) no-repeat center
}

a.tel{
display: block;
color: #727272;
font-weight: 500;
display: flex;
line-height: 2;
letter-spacing: 0em
}

/*--------------------about--------------------*/

h4.about{
font-size: 14px;
margin-bottom: 30px;
line-height: 1.8;
text-align: justify;
font-weight: 500
}

/*--------------------voice--------------------*/

section#voice_section{
padding: 30px 0px 30px 48px;
position: relative;
aspect-ratio: 4.288/1;
}

section#voice_section:before{
content: '';
position: absolute;
width: 1px;
height: 100%;
background: #000;
left: 28px;
top:0px
}

ul.voice_slide{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
z-index: -1
}

li.voice-wrapper{
position: relative
}

li.voice-wrapper:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.7);
top:0px;
left: 0px
}


div.voice_page{
width: var(--main-width); 
padding: 30px 4% 30px 19px;
position: relative
}

div.voice_page:nth-of-type(2n):before{
content: '';
width:calc(100% + 28px);
height: 100%;
background: #f6f6f6;
position: absolute;
top:0px;
left: -28px;
z-index: -1
}

article.voice_left{
width: 100%;
}

p.voice_image{
width: 80%;
aspect-ratio: 3/ 2.2;
background: #efefef
}

p.voice_image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center
}

h3.voice_page{
font-size:16px;
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-optical-sizing: auto;
font-style: normal;
margin-bottom: 10px
}

ul.voice_page{
display: flex;
align-items: center;
font-family: "Noto Serif JP", serif;
font-weight: 600;
margin-bottom: 10px
}

li.voice_logo{
width: 100px
}

h5.voice_page{
font-size:10px;
color: #868686
}

li.voice_page{
padding-left: 15px
}

h2.voice_page{
font-size: 18px
}

h2.voice_page　small{
font-size: 10px
}

p.voice_page{
font-size: 13px;
font-family: "Noto Serif JP", serif;
font-weight: 600;
line-height: 1.6;
margin-bottom: 20px
}

/*--------------------greeting--------------------*/

div.greeting{
width: var(--main-width); 
}

p.greeting_image{
width: 100%;
height: 400px;
background: #efefef;
position: relative;
margin-bottom: 30px
}

h2.greeting{
font-family: "Zen Antique", serif;
font-weight: 400;
font-size: 22px;
margin-bottom: 30px
}

article.greeting{
font-family: "Zen Antique", serif;
font-weight: 400;
}

p.greeting{
font-family: "Zen Antique", serif;
font-weight: 400;
line-height: 2;
margin-bottom: 20px;
text-align: justify
}

h4.greeting{
text-align: right;
font-family: "Zen Antique", serif;
font-weight: 400;
}

h3.greeting{
font-size: 25px;
text-align: right;
font-family: "Zen Antique", serif;
font-weight: 400;
}

/*--------------------service--------------------*/

section.service{
padding: 30px 0px 30px 19px;
position: relative;

border-top:solid 1px #000
}

section.service_bg:before{
content: '';
width:calc(100% + 29px);
height: 100%;
background: #f6f6f6;
position: absolute;
left: -29px;
top:0px;
z-index: -1
}

section#service_page{
padding: 60px 0px 30px 20px;
position: relative;
}

/*--------------------privacy--------------------*/

div.contents{
width: var(--main-width); 
}

h3.privacy{
font-size: 20px;
font-family: "Noto Serif JP", serif;
font-weight: 600;
margin-bottom: 30px;
position: relative
}

h3.privacy:before{
content: '';
position: absolute;
width: 3px;
height: 200%;
background: #000;
left: -22px;
z-index: 10;
}

h4.privacy{
font-weight: 500;
font-size:12px;
margin-bottom: 30px;
line-height: 1.8
}

/*--------------------news--------------------*/

h3.news_page{
font-size:26px;
margin-bottom: 40px
}

p.news_date{
color: #999;
font-size:14px;
font-weight: 400;

}

div.news_page{
width: var(--main-width); 
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px
}

span.news_page_date{
color: #20529a;
font-size:12px;
font-weight: 600;
display: block;
margin-top: 10px
}

div.news_page_share{
display: flex;
align-items: center;
gap: 15px;
}

a.news_page_share{
display: block;
height: 18px;
}

a.news_page_share img{
height: 18px;
}

ul.news_grid{
display: block;
}

ul.news_grid li{
display: block;
}

li.news_grid_left{
width:100%
}

li.news_grid_right{
padding-top: 30px
}

p.news{
font-weight: 200;
line-height: 2;
margin-bottom: 30px;
text-align: justify
}

p.news_page_link{
font-size:14px;
font-weight: 500;
display: flex;
align-items: center;
margin-bottom: 60px
}

p.news_page_link a{
color: #20529a;
font-weight: 500;
display: flex;
align-items: center;
text-decoration: underline
}

p.news_page_link a:after{
content: '';
width: 20px;
height: 20px;
background: url(../img/icon/news_page_link.svg) no-repeat center;
background-size: cover
}

a.news_back{
display: block;
color: #20529a;
font-size:14px;
font-weight: 600;
display: flex;
align-items: center;
text-decoration: underline
}

a.news_back:before{
content: '';
width: 14px;
height: 14px;
background: url(../img/icon/triangle_left.png) no-repeat center;
background-size: cover;
margin-right: 15px
}

a.news_back:hover{
text-decoration: underline
}

/*--------------------mmv--------------------*/

section#mvv1,section#mvv2{
width: var(--main-width); 
padding: 30px 0px 30px 19px;
position: relative;
border-top:solid 1px #000;
}

h3.mvv{
font-size: 34px;
font-weight: 600;
font-style: normal;
font-optical-sizing: auto;
line-height: 1.2;
font-style: normal;
letter-spacing: 0;
margin-bottom: 20px
}

p.mvv_right{
width: var(--main-width); 
aspect-ratio: 3 / 2.5;
border-radius: 15px;
overflow: hidden
}

p.mvv_right img{
width: 100%;
height: 100%;
object-fit: cover
}

h4.mvv{
font-size: 18px;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
margin-bottom: 30px
}

p.mvv{
font-size: 13px;
width: var(--main-width); 
text-align: justify;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
line-height: 1.8;
margin-bottom: 30px;
text-align: justify
}

ul.mvv{
width: var(--main-width); 
border-top:solid 1px #000;
padding: 20px 0px
}

ul.mvv li{
vertical-align: middle;

}

li.mvv_left{
width: 100%;
font-size: 20px;
display: flex;
align-items: center;
margin-bottom: 20px
}

span.mvv_small{
font-size:10px;
color: #000;
font-weight: 500;
border:solid 1px #000;
width: max-content;
padding: 0px 6px;
height: 16px;
border-radius: 8px;
line-height: 14px;
margin-left: 15px
}

li.mvv_right{
font-weight: 500;
font-family: "Zen Old Mincho", serif;
}


/*--------------------news list--------------------*/

div.news_list{
width: var(--main-width); 
border-bottom: solid 1px #dcdcdc;
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 60px;
overflow-x: scroll
}

p.news_list{
padding-bottom: 15px;
flex-shrink:0
}

p.news_list:hover{
cursor: pointer;
text-decoration: underline
}

p.news_select{
border-bottom: solid 3px #20529a;

}