@charset "utf-8";

i.section{
color: #000;
font-size: 15px
}

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{
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
padding: 15px 0px;
margin-top: 10px
}

ol.contents {
width: var(--main-width); 
margin: 0px auto;
text-align: right;
}

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:13px;
}

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: 60px 0px 60px 40px;
position: relative
}

section#background{
padding: 60px 0px 60px 40px;
position: relative;
padding-left: 240px;
position: relative;

}

section#background p{
color: #fff
}

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

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

section#background:before{
content: '';
position: absolute;
width: 1px;
height: 100%;
background: #fff;
left: 200px;
top:0px;
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.jpg) no-repeat center;
background-size: cover;
color: #fff;

}

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

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

h3.contents_section{
font-size:64px;
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:50px;
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-optical-sizing: auto;
line-height: 1.2;
font-style: normal;
margin-bottom: 30px;
}

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

h3.contents{
font-size:40px;
}

p.content_lead{
font-size: 15px;
font-weight: 500;
margin-bottom: 60px;
color: #444;
line-height: 1.8;
position: relative;
z-index: 1
}

div.reason_link{
width: 1280px; 
border-top:solid 1px #000;
border-bottom:solid 1px #000;
padding: 5px 0px;
display: flex;
align-items: center;
position: relative;
left: -80px;
background: #fff;
}

a.reason_link{
width: calc(100% / 7);
height: 60px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
border-right: solid 1px #000;
padding-top: 10px
}

a.reason_link:last-of-type{
border-right: none;
}

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

p.reason_link{
width: 60px;
height: 18px;
line-height: 18px;
font-size: 14px;
font-family: "Bebas Neue", sans-serif;
background: #000;
color: #fff;
position: absolute;
top:-10px;
}

h3.reason_link{
font-weight: 600;
line-height: 1.4
}

h3.reason_link small{
font-size: 70%;
display: block
}

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

section#reason1{
padding: 60px 0px 60px 240px;
background: #ffe100;
position: relative
}

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

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

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

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

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

h4.reason_title{
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
position: absolute;
left: -40px;
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: 60px 0px 30px 40px;
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: 500px;
left: -80px;
top:40px;
}

section#reason3:before,section#reason6:before{
width: 800px;
height: 520px;
left: -80px;
top:40px;
}

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

ul.contents_wrap{
width: var(--main-width); 
display: flex;
align-items: start;
gap: 50px;
position: relative;
z-index: 0
}

li.contents_wrap_left{
width: 50%;
}

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

li.contents_wrap_right{
width: 50%;
}

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

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

div.contents_contact_wrap{
width: 600px;
background: #fff;
display: flex;
align-items: center;
margin-bottom: 20px;
border:solid 1px #20529a
}

ul.contact{
display: flex;
align-items: center;
font-size:15px;
}

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

li.contact_left{
width: 280px;
}

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

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

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

a.complete{
width: 80%;
max-width: 300px;
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: 900px; 
border-bottom:1px solid #D6D6D6;
display: table;
table-layout: fixed;
}

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

li.company_left{
width: 200px
}

li.company_right{
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;
}

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

h4.about{
font-size: 16px;
margin-bottom: 40px;
line-height: 1.8;
font-weight: 500
}

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

section#voice_section{
padding: 60px 0px 0px 240px;
width: 100%;
aspect-ratio: 4.288/1;
position: relative;
}

div.slick-list draggable:after{
content: '';
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
position: absolute;
top:0px;
left: 0px
}

section#voice_section:before{
content: '';
position: absolute;
width: 1px;
height: 100%;
background: #000;
left: 200px;
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); 
display: flex;
align-items: center;
justify-content: space-between;
padding: 120px 0px 60px 40px;
position: relative
}

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

article.voice_left{
width: 700px;
}

p.voice_image{
width: 300px;
aspect-ratio: 1/ 1;
background: #efefef
}

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

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

ul.voice_page{
display: flex;
align-items: center;
font-family: "hiragino-mincho-pron", sans-serif;
font-weight: 600;
margin-bottom: 20px
}

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: 14px;
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-style: normal;
line-height: 1.8
}

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

div.greeting{
width: var(--main-width); 
display: flex;
align-items: start;
gap: 60px;
padding-bottom: 60px
}

h2.greeting{
font-family: "Zen Antique", serif;
font-weight: 400;
font-size: 28px;
writing-mode:vertical-rl;
padding-top: 60px
}

article.greeting{
width: 500px;
position: relative;
top:60px
}

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

p.greeting_image{
width: 350px;
height: 450px;
background: #efefef;
position: relative;

}

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: 60px 0px 60px 40px;
position: relative;
border-top:solid 1px #000
}

section.service_bg:before{
content: '';
width:1400px;
height: 100%;
background: #f6f6f6;
position: absolute;
left: -80px;
top:30px;
z-index: -1
}

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


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

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

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

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

h4.privacy{
padding-left: 200px;
font-weight: 500;
font-size:13px;
margin-bottom: 60px;
line-height: 1.8
}

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

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

p.news_date{
color: #999;
font-size:14px;
font-weight: 400;
display: flex;
align-items: center;
gap:10px
}

div.news_page{
width: 900px; 
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 60px
}

span.news_page_date{
color: #20529a;
font-size:13px;
font-weight: 600;
}

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

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

a.news_page_share img{
height: 18px;
}

ul.news_grid{
display: table;
table-layout: fixed;
margin-bottom: 60px
}

ul.news_grid li{
display: table-cell;
vertical-align: top
}

li.news_grid_left{
width: 300px
}

li.news_grid_right{
padding-left: 40px
}

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

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

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;
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: 60px 0px 60px 40px;
position: relative;
border-top:solid 1px #000;
display: flex;
align-items: center;
justify-content: space-between
}

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

p.mvv_right{
width: 400px;
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: 24px;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
margin-bottom: 40px
}

p.mvv{
font-size: 14px;
width: 620px;
text-align: justify;
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
line-height: 1.8
}

ul.mvv{
width: var(--main-width); 
display: table;
table-layout: fixed;
border-top:solid 1px #000
}

ul.mvv li{
display: table-cell;
vertical-align: middle;
padding: 30px 0px
}

li.mvv_left{
width: 160px;
font-size: 20px
}

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

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
}

p.news_list{
padding-bottom: 15px
}

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

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

}