@charset "utf-8";


p.contents_image{
margin-bottom: 20px
}

/*--------------------pager--------------------*/

ul#pager{
text-align: center;
margin: 40px 0px 40px 0px;
font-size:15px;
}

ul#pager li{
height:42px;
width: 42px;
display: inline-block;
border:solid 1px #efefef;
line-height: 42px;
border-radius: 20px;
overflow: hidden
}

a.next{
padding: 0px 10px 0px 10px;
}

ul#pager li a{
display: block;
width:100%;
height:100%;
color:#999
}

a.current{
display: block;
background: #999;
color:#fff!important;
font-weight: bold;
}

span.dot{
color:#999;
display: inline-block;
margin: 0px 5px 0px 5px;
}

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

ol.contents {
width: 90%;
margin: 0px auto;
font-size: 12px;
border-bottom: solid 1px #dcdcdc;
padding: 24px 0px;
margin-bottom: 20px;
font-weight: 500
}

ol li{
display:inline-block;
list-style: none;
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;
}

ol li a {
text-decoration: none;
color: #000;
}

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;
}

body{
background-image:  url(../img/liver/new_back_image1.png)  , url(../img/liver/new_back_image2.png) ;
background-repeat: no-repeat;
background-position: top right -10vw , bottom 700px left -10vw;
background-size: 100% , 100%;
}

body.profile_body{
background:none;
}

/*--------------------other contents--------------------*/

section.contents{
width: 94%;
height: 70vh;
overflow-y: auto;
margin: 0px auto;
border:solid 1px #e8e8e8;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}

section.normal_contents h2.contents{
width: 90%;
margin: 0px auto 20px auto
}

h2.contents{
font-family: 'AlternateGothic', sans-serif;
letter-spacing: 0.1em;
font-weight: 400;
font-size:30px;
color:#fe8f42 ;
align-items: center;
margin-bottom: 20px
}

h2.contents:after{
content: "";
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(251, 104, 132, 1) 0%, rgba(253, 167, 82, 1) 50%, rgba(255, 249, 191, 1) 100%);
display: block;
margin-top: 5px;
}

i.h2{
font-size: 34%;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, osaka, ＭＳ Ｐゴシック, MS PGothic, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, sans-serif;
font-weight: 600;
color: #999;
display: inline-block;
vertical-align: middle
}

i.h2:before{
content: "";
width: 30px;
height: 1px;
background: #999;
display: inline-block;
margin: 0px 5px 0px 5px;
vertical-align: middle;
}

article.contents{
margin-bottom: 30px;
}

h3.contents{
font-size:14px;
font-weight: 600;
margin-bottom: 30px;
}

h4.contents{
font-size: 12px;
font-weight: 400;
line-height: 2.0
}

/*--------------------introduction_article--------------------*/

article.introduction{
width: 100%;
border-bottom: solid 1px #efefef;
margin-bottom: 15px
}

a.products_image{
display: block;
margin-bottom: 10px
}

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

.w90{
width: 90%;
margin: 0px auto
}

label.form{
width: 100%;
height: 48px;
display: block;
border: solid 1px #dcdcdc;
border-radius: 3px
}

label.textarea{
width: 100%;
height: 200px;
border: solid 1px #dcdcdc;
overflow: hidden
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

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

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

a.checkbox{
text-decoration: underline;
color: #000
}

a.checkbox:hover{
text-decoration: none;
}

label.submit{
width: 80%;
max-width: 312px;
display: block;
font-size:14px;
line-height: 50px;
height: 50px;
color: #fff;
margin: 0px auto;
border-radius: 25px;
overflow: hidden;
background:#fe8f42
}


/*--------------------form--------------------*/

h4.error{
width: 94%;
margin: 0px auto;
font-size:16px;
text-align: center;
line-height: 1.4;
margin-bottom: 10px;
}

table.formTable{
width: 90%;
display: block;
font-size:14px;
margin: 0px auto 20px auto;
text-align: left;
}

table.formTable tbody,table.formTable tr{
width: 100%;
display: block;
}

table.formTable th{
width: 100%!important;
display: block!important;
margin-bottom: 5px;
font-weight: 400
}

span.contact_left{
color:#666;
margin-left: 10px;
}

table.formTable td{
width: 100%;
display: block;
padding: 10px 0px 10px 0px;
border-bottom: solid 1px #efefef;
margin: 0px auto 10px auto
}

div.error_messe{
width: 90%;
margin: 0px auto 40px auto;
}

p.error_messe{
color: #da1124;
font-size:14px;
border-bottom: solid 1px #dcdcdc;
padding: 18px 0px 18px 0px;
}

div.thanks{
width: 90%;
margin: 0px auto;
font-size:12px;
line-height: 1.8;
}


ul.overview{
width: 100%;
align-items: center;
font-size:14px;
display: block;

}

ul.overview li{
display: block;
padding: 15px 0px 15px 0px;
}

li.overview_title{
width: 100%;
background: #efefef;
color: #fe8f42;
padding-left: 20px!important;
}

li.overview{
width: 90%;
margin: 0px auto;
color:#666;
font-weight: 500;
}

li.overview:before{
content: "";
height: 80%;
width: 1px;
background: #dcdcdc;
position: absolute;
top:50%;
left: 0px;
transform: translateY(-50%)
}

a.overview{
font-size:110%;
display: block;
margin-top: 10px;
text-decoration: underline;
color:#666
}

/*--------------------introduction_article--------------------*/

header.normal_header{
padding-top: 100px
}

header.normal_header a.header_tel{
color: #000
}

header.normal_header p.header_tel{
border-bottom: solid 1px #000;
}

article.introduction_article{
width: 100%;
margin: 0px auto;
color: #333;
}

img.introduction_article{
margin-bottom: 30px
}

h1.introduction_article{
font-size:20px;
font-weight: 600;
line-height: 1.4;
color: #333;
margin-bottom: 20px
}

h4.introduction_article{
display: flex;
font-size: 13px;
margin-bottom: 20px;
font-weight: 500
}

h3.introduction_article{
font-size: 15px;
line-height: 1.7;
font-weight: 500;
margin-bottom: 40px
}

h5.introduction_article{
font-size: 15px;
margin-bottom: 40px;
width: max-content;
}

h5.introduction_article p{
margin-top: 10px;
font-weight: 500;
padding-right: 50px
}

a.google_maps{
display: block;
text-align: right;
margin-top: 10px;
color:#000;
text-decoration: underline
}

div.introduction_article{
overflow-x: auto;
padding-bottom: 20px;
white-space: nowrap;
}

a.introduction_article{
width: 45%;
display: inline-block;
aspect-ratio: 3 / 2;
overflow: hidden
}

a.introduction_article:hover img{
transform: scale(1.2);
transition: 0.4s
}

a.wide_contact{
width: 100%;
padding: 40px 0px 40px 0px;
display: block;
background: #dcdcdc;
color: #000;
text-align: center;
margin-bottom: 40px;
}

h3.wide_contact{
font-weight: 600;
font-size:16px;
margin-bottom: 30px
}

p.wide_contact{
width: 260px;
background: #000;
padding: 15px 0px 15px 0px;
color: #fff;
font-size:14px;
margin: 0px auto 30px auto;
border-radius: 5px;
letter-spacing: 0.05em;
}

a.wide_contact:hover p.wide_contact{
background: #fff;
color: #000;
transition: 0.4s
}

h5.wide_contact{
font-size:13px;
font-weight: 500;
line-height: 1.5
}

p.related_image{
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
margin-bottom: 10px
}

p.related_image:hover img{
transform: scale(1.2);
transition: 0.4s
}

a.related{
width: 65%;
color: #333;
display: inline-block;
vertical-align: top;
margin-right: 10px;
padding-bottom: 30px;
white-space: normal;
}

h3.related{
width: 100%;
font-size:13px;
line-height: 1.4;
color:#333;
border-top:solid 1px #efefef;
padding-top: 10px;
margin-top: 10px;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/*--------------------Profile--------------------*/

div.profile_wrapper{

}

p.profile_image{
width: 100%;

}

img.profile_image{
width: 100%;

}

article.profile_wrapper{
width: 100%;
}

h3.profile_wrapper{
font-size:22px;
border-top:solid 1px #dcdcdc;
padding: 30px 0px 30px 0px
}

h3.profile_wrapper span{
font-size:14px;
display: inline-block;
vertical-align: middle;
color: #666;
margin-left: 15px;
font-weight: 500
}

h4.profile_wrapper{
font-size:15px;
border-top:solid 1px #dcdcdc;
border-bottom:solid 1px #dcdcdc;
line-height: 2;
font-weight: 500;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 20px
}

a.watch{
display: block;
width:max-content;
padding: 0px 40px 0px 40px;
font-size:14px;
background: #1D1D1D;
height: 48px;
line-height: 48px;
border-radius: 24px;
letter-spacing: 1px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
margin-bottom: 30px
}

a.watch:after{
content: '';
width: 24px;
height: 24px;
background: url(../img/icon/delivery.png) no-repeat center;
background-size: cover;
margin-left: 5px
}

div.profile_wrapper_sns{
display: flex;
align-items: center;
}

a.profile_wrapper_sns{
width: 30px;
display: block;
margin-right: 20px
}

/*--------------------interview_list--------------------*/

a.interview_list{
width: 100%;
display: block;
border-radius: 15px;
overflow: hidden;
box-shadow: 5px 5px 5px #dcdcdc;
background: #fff;
color: #000;
margin-bottom: 30px
}

p.interview_list{
width: 100%
}

p.interview_list_date{
font-size: 13px;
color: #666;
margin-bottom: 10px
}

h3.interview_list{
font-size: 22px;
margin-bottom: 10px;
line-height: 1.4;
}

article.interview_list{
padding: 20px
}

h4.interview_list{
width: max-content;
background: #000;
height: 20px;
line-height: 20px;
border-radius: 10px;
font-size:15px;
font-weight: 500;
color: #fff;
padding: 0px 20px;
margin-bottom: 15px;
}

h5.interview_list{
font-size:14px;
font-weight: 500;
color: #666;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/*--------------------interview--------------------*/

div.interview{
width: 90%;
margin: 0px auto
}

p.interview_date{
font-size: 11px;
color: #666;
margin-bottom: 30px
}

h1.interview{
font-size:24px;
margin-bottom: 30px;
line-height: 1.4
}

p.interview_image{
border-radius: 15px;
border:solid 1px #dcdcdc;
overflow: hidden;
margin-bottom: 30px
}

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

div.interview_wrap{
padding: 20px;
background: #fff;
box-shadow: 5px 5px 5px #dcdcdc;
border-radius: 15px;
margin-bottom: 40px
}

a.interview{
color: #666;
font-size:14px;
display: block;
margin-bottom: 15px;
text-decoration: underline;
font-weight: 500
}

a.interview:hover{
text-decoration: none;
}

article.interview{
margin-bottom: 20px
}

h2.interview{
color: #fff;
background: linear-gradient(-90deg, rgba(255, 182, 90, 0.5) 0%, rgba(255, 145, 165, 1) 100%);
font-size: 18px;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
line-height: 1.4
}

h3.interview_answer{
font-weight: 500;
line-height: 2;
font-size: 14px;

}

video.interview{
width: 90%
}