@charset "utf-8";
 html{
font-size: 16px;
line-height: 1.2em;
font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
color: #242424;
}
body{
width: 100%;
margin: 0 auto;
}
.subline{
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.subline1024{
width: 90%;
max-width: 1024px;
margin: 0 auto;
}
.subline900{
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.hidden{
overflow: hidden;
}
.big_h2{
font-size: 2.6em;
letter-spacing: 0.3em;
text-align: center;
}
.big_h2.long{
font-size: 2.4em;
letter-spacing: 0.15em;
}
.midium_p{
font-size: 1.5em;
letter-spacing: 0.1em;
margin-bottom: 36px;
text-align: center;
}
.midium_h2{
font-size: 2em;
letter-spacing: 0.15em;
text-align: center;
}
.title_giza{
width: 72px;
margin: 28px auto 0;
display: block;
}
mark{
background: linear-gradient(transparent 43%, #F8FBC7 0%);
display: inline;
padding: 0 2px;
}
ul.list_plus_ul{
display: table;
margin: 0 auto;
}
li.list_plus{
display: table;
padding: 10px 0;
padding-left: 36px;
box-sizing: border-box;
background-image: url(//led.minamihara.co.jp/rs/images/svg/plus_blue.svg);
background-repeat: no-repeat;
background-position: left 0 center;
background-size: 16px;
font-size: 0.9em;
line-height: 1.2;
}
p.normal_p{
line-height: 1.8;
color: #444444;
}
a.normal_blue_a{
color: #185790;
text-decoration: underline;
}
br.add_768{
display: none;
}
br.add_540{
display: none;
}
br.add_320{
display: none;
} .hyphen_txt{
display: table;
padding: 0 24px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
line-height: 1.6;
}
.hyphen_txt::before,
.hyphen_txt::after{
display: block;
content: '';
width: 6px;
height: 2px;
background-color: #444444;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.hyphen_txt::before{
left: 0;
}
.hyphen_txt::after{
right: 0;
} .block768{
display: none;
}  .flex_row_wrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex_row{ display: flex;
align-items: stretch;
flex-flow: column;
} .row_align{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} .row2_res1_flex_wrap{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
box-sizing: border-box;
font-size: 0;
}
.row2_res1_flex{
display: flex;
flex-direction: column;
font-size: 1rem;
box-sizing: border-box;
} .row4_res1_inline_wrap{
font-size: 0;
}
.row4_res1_inline{
display: inline-block;
font-size: 1rem;
width: 25%;
vertical-align: top;
box-sizing: border-box;
} .row3_res1_inline_wrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.row3_res1_inline{
display: flex;
align-items: stretch;
flex-flow: column;
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: -ms-calc(100% / 3);
width: calc(100% / 3);
vertical-align: top;
box-sizing: border-box;
} .link_btn_wrap{
display: block;
padding: 12px 0;
padding-right: 32px;
margin: 0 auto;
text-align: center;
position: relative;
border-radius: 60px;
box-sizing: border-box;
transition : all 0.2s ease 0s;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.link_btn_wrap.link_white{
border: #777777 1px solid;
background-color: #ffffff;
}
.link_btn_wrap.link_white:hover{
background-color: #efefef;
}
.link_btn_wrap.link_blue{
color: #ffffff;
background-color: #185790;
}
.link_btn_wrap.link_blue:hover{
background-color: #3373ae;
}
.link_btn_wrap .link_arrow{
width: 10px;
display: block;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.link_btn_wrap:hover .link_arrow{
animation: 0.2s ease 0s linkArrow;
}
@keyframes linkArrow{
0%{
transform: translateY(-50%) scaleY(100%);
}
50%{
transform: translateY(-50%) scaleY(0%);
}
100%{
transform: translateY(-50%) scaleY(100%);
}
}
.line_marker{
background: linear-gradient(transparent 70%, #F8FBC7 0%);
display: inline;
padding: 0 2px 4px;
} #loadingBg{
position: fixed;
left: 0;
top: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: 9;
background-color: #ffffff;
}
#loadingBg.none_active{
animation: 0.5s ease 0.3s noneActive;
}
#loading.none_active{
animation: 0.5s ease 0.3s noneActive;
}
#loading_now{
position: fixed;
top: 50%;
left: 50%;
width: 98%;
padding: 50px 20px;
margin: 0 auto;
z-index: 10;
text-align: center;
transform: translate(-50%, -50%);
}
#loading_now #yomikomi{
display: block;
font-size: 0.8em;
margin-bottom: 36px;
color: #777777;
letter-spacing: 0.2em;
}
#loading_now #percent{
margin-bottom: 32px;
text-align: center;
font-size: 16px;
color: #999999;
letter-spacing: 0.2em;
}
#loading_now #gauge{
width: 0px;
height: 3px;
background: #2988BC;
border-radius: 20px;
transition : all 0.2s ease 0s;
border-radius: 12px;
}
@keyframes noneActive{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}   .delay_loadJS{ 
opacity: 0; 
} 
.fadeimg_JS{  
opacity: 1; 
}  .fadeinEfcJS{ 
opacity: 0; 
} 
.fade_left_right.fade_active{ 
animation:  0.8s LeftRight; 
opacity: 1; 
} 
.fade_right_left.fade_active{ 
animation:  0.8s RightLeft; 
opacity: 1; 
} 
.fade_bottom_top.fade_active{ 
animation:  0.8s BottomTop; 
opacity: 1; 
} 
.fade_cover_slide{ 
position: relative; 
opacity: 1; 
} 
.fade_cover_slide_moji{ 
position: relative; 
z-index: 0; 
} 
.fade_cover_slide_moji.fade_active{ 
animation:  1s CoverMoji; 
opacity: 1; 
} 
.fade_cover_slide::before{ 
content: ''; 
background-color: #5BCCD9; 
height: 100%; 
width: 0; 
position: absolute; 
display: block; 
left: 0; 
top: 0; 
z-index: 1; 
} 
.fade_cover_slide.fade_active::before{ 
animation:  1s CoverSlideBefore; 
} @keyframes LeftRight{ 
0%{ opacity: 0; } 
1%{ opacity: 0; transform: translateX(-100%); } 
100%{ opacity: 1; transform: translateX(0%); } 
} @keyframes RightLeft{ 
0%{ opacity: 0; } 
1%{ opacity: 0; transform: translateX(100%); } 
100%{ opacity: 1; transform: translateX(0%); } 
} @keyframes BottomTop{ 
0%{ opacity: 0; } 
1%{ opacity: 0; transform: translateY(40px); } 
100%{ opacity: 1; transform: translateY(0px); } 
} @keyframes CoverMoji{ 
0%{opacity: 0;} 
50%{opacity: 0;} 
51%{opacity: 1;} 
100%{opacity: 1;} 
} @keyframes CoverSlideBefore{ 
0%{ opacity: 0; left: 0; right: auto; } 
1%{ opacity: 1; left: 0; right: auto; } 
50%{ width: 100%; left: 0; right: auto; } 
51%{ width: 100%; right: 0; left: auto; } 
100%{ width: 0; right: 0; left: auto; } 
} #main_header{
width: 100%;
padding: 16px 0;
box-sizing: border-box;
border-top: #3077B7 3px solid;
position: fixed;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 7;
overflow: initial;
clear: both;
}
#logo_link{
display: block;
width: 240px;
float: left;
margin-left: 36px;
}
#main_header .right{
display: block;
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
width: -ms-calc(100% - 300px);
width: calc(100% - 300px);
float: right;
}
#main_nav{
position: relative;
margin-top: 5px;
}
#main_nav .menu-main_menu-container{
display: block;
margin-right: 188px;
margin-left: auto;
}
#main_nav ul{
text-align: center;
width: fit-content;
margin-left: auto;
}
#main_nav li{ width: 150px;
position: relative;
}
#main_nav .menu-main_menu-container a{
display: block;
font-size: 0.9em;
font-weight: bold;
padding: 10px 12px;
position: relative;
cursor: pointer;
}
#main_nav .menu-main_menu-container a:hover{
color: #777777;
border-bottom: solid 2px #0371BC;
}
#main_nav .menu-main_menu-container li:nth-child(2)::before{
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ddd;
position: absolute;
right: 8px;
top: 12px;
}
#main_nav .menu-main_menu-container li:nth-child(3)::before{
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ddd;
position: absolute;
right: 8px;
top: 12px;
}
#main_nav .menu-main_menu-container li:nth-child(4)::before{
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ddd;
position: absolute;
right: 0px;
top: 12px;
}
#main_nav .menu-main_menu-container .sub-menu li:nth-child(2)::before{
display: none;
}
#main_nav .menu-main_menu-container .sub-menu li:nth-child(3)::before{
display: none;
}
#main_nav .menu-main_menu-container .sub-menu li:nth-child(4)::before{
display: none;
}
#main_nav .menu-main_menu-container a::before{
display: none;
content: '';
width: 36px;
height: 2px;
border-radius: 6px;
background-color: #3077B7;
border: none;
bottom: -6px;
left: 50%;
position: absolute;
transform: translateX(-50%);
}
#main_nav .menu-main_menu-container a.active::before{
display: block;
}
#header_contact{
display: block;
width: 175px;
color: #ffffff;
background-color: #3077B7;
text-decoration: none;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
position: absolute;
right: 0;
top: -10px;
padding: 16px 0 16px 28px;
box-sizing: border-box;
}
#header_contact .inner{
position: relative;
padding-left: 36px;
}
#header_contact .mail_icon{
width: 24px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#header_contact .btn_txt{
font-size: 0.9em;
} #main_nav ul {
list-style: none;
}
#main_nav ul.menu {
display: flex;
width: auto;
justify-content: end
}
#main_nav ul.menu_content {
display: none;
position: absolute;
}
#main_nav ul li a{
position: relative;
}
#main_nav ul.sub-menu{
display: none;
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
#main_nav .sub-menu li:nth-child(1){ position: relative;
}
#main_nav .sub-menu li{
background-color: #eee;
border-top: solid 1px #fff;
padding: 5px 0;
width: 230px;
}
#main_nav .sub-menu li:hover{
background-color: #ddd;
}
#main_nav .sub-menu li a:hover{
border-bottom: none;
} #sp_mainlogo{
display: none;
}
#sub_nav{
display: none;
position: fixed;
top: 8px;
right: 8px;
z-index: 7;
}
#sub_nav .nav-unshown{
display: none;
}
#sub_nav #nav-open{
display: inline-block;
width: 45px;
height: 45px;
vertical-align: middle;
position: relative;
z-index: 7;
transition : all 0.8s ease;
}
#sub_nav .menu_line{
position: absolute;
height: 2px;
width: 80%;
left: 50%;
transform: translateX(-50%);
border-radius: 3px;
background-color: #444444;
display: block;
content: '';
cursor: pointer;
transition : all 0.5s ease 0s;
}
#sub_nav .menu_txt,
#sub_nav .menu_close{
font-size: 0.8em;
font-weight: bold;
color: #444444;
position: absolute;
top: 34px;
left: 50%;
transform: translateX(-50%);
}
#sub_nav .menu_close{
opacity: 0;
color: #ffffff;
}
#sub_nav .menu_line:nth-child(1){
top: 4px;
}
#sub_nav .menu_line:nth-child(2){
top: 14px;
}
#sub_nav .menu_line:nth-child(3){
top: 24px;
}
#sub_nav #nav-close{
display: none; position: fixed;
z-index: 4;
top: 0; left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
animation: 0.5s navClose;
}
#sub_nav #nav-content{
overflow: auto;
position: fixed;
top: 0;
right: 0;
z-index: 5; width: 100%; height: 100%;
background: linear-gradient(to right, #0371BC, #0398BC);
transition: 0.5s ease-in-out; -webkit-transform: translateX(105%);
transform: translateX(105%); color: #353434;
padding: 58px 12px 32px;
box-sizing: border-box;
} #sub_nav #nav-input:checked ~ #nav-close{
display: block; opacity: 0.5;
animation: 0.5s navOpen;
}
@keyframes navOpen{
0%{
opacity: 0;
display: none;
}
1%{
display: block;
}
100%{
opacity: 0.5;
}
}
@keyframes navClose{
0%{
opacity: 0.5;
display: block;
}
99%{
opacity: 0;
display: block;
}
100%{
display: none;
}
}
#sub_nav #nav-input:checked ~ #nav-content{
-webkit-transform: translateX(0%);
transform: translateX(0%); box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#sub_nav #nav-input:checked ~ #nav-open{
}
#sub_nav #nav-input:checked ~ #nav-open .menu_line{
background-color: #ffffff;
}
#sub_nav #nav-input:checked ~ #nav-open .menu_line:nth-child(1){
transform: translate(-50%, 0) rotate(45deg);
top: 16px;
}
#sub_nav #nav-input:checked ~ #nav-open .menu_line:nth-child(2){
transform: translate(-50%, 0) rotate(45deg);
top: 16px;
}
#sub_nav #nav-input:checked ~ #nav-open .menu_line:nth-child(3){
transform: translate(-50%, 0) rotate(-45deg);
top: 16px;
}
#sub_nav #nav-input:checked ~ #nav-open .menu_txt{
opacity: 0;
}
#sub_nav #nav-input:checked ~ #nav-open .menu_close{
opacity: 1;
}
#sub_nav .content_sub{
width: 95%;
margin: 86px auto 0;
}
#hum_menu{
text-align: center;
}
#hum_menu li{
display: block;
width: 100%;
margin: 2% 0;
}
#hum_menu li a{
display: block;
width: 100%;
height: 72px;
background-color: #ffffff;
box-sizing: border-box;
border-radius: 4px;
position: relative;
}
#hum_menu li .position{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 95%;
transform: translate(-50%, -50%);
overflow: hidden;
}
#hum_menu li img{
width: 54px;
display: block;
float: left;
}
#hum_menu li:nth-child(1) img{
width: 54px;
margin-left: 10px;
}
#hum_menu li:nth-child(2) img{
width: 64px;
margin-left: 10px;
}
#hum_menu li:nth-child(3) img{
width: 30px;
margin-left: 23px;
}
#hum_menu li:nth-child(4) img{
width: 48px;
margin-left: 14px;
}
#hum_menu li:nth-child(5) img{
width: 42px;
margin-left: 18px;
}
#hum_menu li p{
display: block;
padding: 12px 0;
border-left: #282828 1px dashed;
width: -webkit-calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -ms-calc(100% - 90px);
width: calc(100% - 90px);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#sub_nav .sp_shop{
display: block;
margin: 24px auto 0;
}
#sub_nav .sp_shop img{
display: block;
}
#sub_nav .txt_link{
display: block;
color: #ffffff;
text-align: center;
text-decoration: underline;
margin: 24px 0;
}
.sp_contact_btn{
display: none;
width: 50px;
position: fixed;
top: 13px;
right: 80px;
z-index: 6;
}
.sp_contact_btn img{
display: block;
width: 100%;
}
#nav-content .nav_title{
font-size: 1.1em;
font-weight: bold;
color: #ffffff;
margin: 24px 0 8px;
}
.menu_product .sub-menu{
font-size: 0;
}
.menu_product .sub-menu li{
font-size: 1rem;
display: inline-block;
}
.menu_product a{
background-color: #ffffff;
display: block;
border-radius: 6px;
padding: 12px 16px;
margin: 4px 0;
box-sizing: border-box;
font-weight: bold;
color: #444444;
}
.menu_product .sub-menu a{
padding-left: 32px;
position: relative;
}
.menu_product .sub-menu a::before{
position: absolute;
content: '';
border-left: #1554A4 8px solid;
border-top: transparent 6px solid;
border-bottom: transparent 6px solid;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
.menu_product .row2{
width: calc(50% - 4px);
}
.menu_product .row2:nth-child(odd){
margin-right: 8px;
}
.menu_product .row1{
margin: 8px 0 0;
}
.normal_menu_nav li{
width: 100%;
}
.normal_menu_nav li a,
#nav-content .nav_link_a{
background-color: #ffffff;
display: block;
border-radius: 6px;
padding: 12px 16px;
margin: 6px 0;
box-sizing: border-box;
font-weight: bold;
color: #444444;
}
#nav-content .nav_link_a.margin{
margin-top: 24px;
} #page_visual{
margin-top: 78px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding: 75px 0 66px;
box-sizing: border-box;
}
#page_visual .white_bg{
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
} #page_visual.about-us{
background-image: url(//led.minamihara.co.jp/rs/images/about-us_bg.jpg);
}
#page_visual.about-us.sp{
background-image: url(//led.minamihara.co.jp/rs/images/about-us_bg_sp.jpg);
} #page_visual.products{
background-image: url(//led.minamihara.co.jp/rs/images/products_bg_pc.jpg);
}
#page_visual.products.sp{
background-image: url(//led.minamihara.co.jp/rs/images/products_bg_sp.jpg);
} #page_visual.outdoor-led-vision{
background-image: url(//led.minamihara.co.jp/rs/images/outdoor-led-vision_bg_pc.jpg);
}
#page_visual.outdoor-led-vision.sp{
background-image: url(//led.minamihara.co.jp/rs/images/outdoor-led-vision_bg_sp.jpg);
} #page_visual.indoor-led-vision{
background-image: url(//led.minamihara.co.jp/rs/images/indoor-led-vision_bg_pc.jpg);
}
#page_visual.indoor-led-vision.sp{
background-image: url(//led.minamihara.co.jp/rs/images/indoor-led-vision_bg_sp.jpg);
} #page_visual.transparent-led-vision{
background-image: url(//led.minamihara.co.jp/rs/images/transparent-led-vision_bg.jpg);
} #page_visual.special-led-vision{
background-image: url(//led.minamihara.co.jp/rs/images/special-led-vision_bg_pc.jpg);
}
#page_visual.special-led-vision.sp{
background-image: url(//led.minamihara.co.jp/rs/images/special-led-vision_bg_sp.jpg);
} #page_visual.liquid-crystal-display{
background-image: url(//led.minamihara.co.jp/rs/images/liquid-crystal-display_bg_pc.jpg);
}
#page_visual.liquid-crystal-display.sp{
background-image: url(//led.minamihara.co.jp/rs/images/liquid-crystal-display_bg_sp.jpg);
} #page_visual.price{
background-image: url(//led.minamihara.co.jp/rs/images/price_bg_pc.jpg);
}
#page_visual.price.sp{
background-image: url(//led.minamihara.co.jp/rs/images/price_bg_sp.jpg);
} #page_visual.led-vision-rental{
background-image: url(//led.minamihara.co.jp/rs/images/led-vision-rental_bg_pc.jpg);
}
#page_visual.led-vision-rental.sp{
background-image: url(//led.minamihara.co.jp/rs/images/led-vision-rental_bg_sp.jpg);
} #page_visual.reason{
background-image: url(//led.minamihara.co.jp/rs/images/reason_bg_pc.jpg);
}
#page_visual.reason.sp{
background-image: url(//led.minamihara.co.jp/rs/images/reason_bg_sp.jpg);
} #page_visual.work,
#page_visual.works{
background-image: url(//led.minamihara.co.jp/rs/images/work_bg_pc.jpg);
}
#page_visual.work.sp,
#page_visual.works.sp{
background-image: url(//led.minamihara.co.jp/rs/images/work_bg_sp.jpg);
} #page_visual.news-list,
#page_visual.news{
background-image: url(//led.minamihara.co.jp/rs/images/news-list_bg_pc.jpg);
}
#page_visual.news-list.sp,
#page_visual.news.sp{
background-image: url(//led.minamihara.co.jp/rs/images/news-list_bg_sp.jpg);
} #page_visual.led-vision,
#page_visual.post{
background-image: url(//led.minamihara.co.jp/rs/images/led-vision_bg_pc.jpg);
}
#page_visual.led-vision.sp,
#page_visual.post.sp{
background-image: url(//led.minamihara.co.jp/rs/images/led-vision_bg_sp.jpg);
} #page_visual.led-lab{
background-image: url(//led.minamihara.co.jp/rs/images/led-lab_bg.jpg);
}
#page_visual.led-lab.sp{
background-image: url(//led.minamihara.co.jp/rs/images/led-lab_bg_sp.jpg);
} #page_visual.illumination{
background-image: url(//led.minamihara.co.jp/rs/images/illumination_bg.jpg);
}
#page_visual.illumination.sp{
background-image: url(//led.minamihara.co.jp/rs/images/illumination_bg_sp.jpg);
} #page_visual.faq,
#page_visual.inquiry,
#page_visual.thankyou,
#page_visual.privacy-policy{
background-image: url(//led.minamihara.co.jp/rs/images/faq_bg_pc.jpg);
}
#page_visual.faq.sp,
#page_visual.inquiry.sp
#page_visual.privacy-policy.sp{
background-image: url(//led.minamihara.co.jp/rs/images/faq_bg_sp.jpg);
}
#page_visual .page_visual_wrap{
position: relative;
z-index: 1;
}
#page_visual .page_top_h1{
font-size: 2.3em;
letter-spacing: 0.1em;
color: #444444;
}
#page_visual .page_top_sub{
color: #1554A4;
margin-top: 32px;
line-height: 1.4;
}
#bread_list{
border-top: #bbbbbb 1px solid;
padding: 24px 0 0;
margin: 36px 0 0;
}
#bread_list .b_list{
display: inline-block;
color: #1554A4;
font-size: 0.9em;
}
#bread_list .parents a{
text-decoration: underline;
color: #1554A4;
}
#bread_list .next{
color: #777777;
margin: 0 8px;
display: inline-block;
} footer{
position: relative;
z-index: 6;
}
#fo_gray{
background-color: #f2f2f2;
padding: 36px 0 48px;
}
#fo_gray .subline{
display: flex;
justify-content: center
}
#fo_gray .left{
width: 55%;
border-right: #777777 1px solid;
padding-right: 72px;
box-sizing: border-box;
}
#fo_gray .right{
width: 44%;
padding-left: 90px;
box-sizing: border-box;
text-align: center;
color: #185790;
}
#fo_gray .title_wrap{
font-size: 0;
}
#fo_gray .tiara{
display: inline-block;
width: 64px;
font-size: 1rem;
vertical-align: middle;
}
#fo_gray .txt1{
font-size: 2.1rem;
letter-spacing: 0.1em;
line-height: 1.6;
display: inline-block;
width: -webkit-calc(100% - 64px);
width: -moz-calc(100% - 64px);
width: -ms-calc(100% - 64px);
width: calc(100% - 64px);
box-sizing: border-box;
padding-left: 32px;
color: #185790;
vertical-align: middle;
}
#fo_gray .info{
color: #444444;
line-height: 1.6;
margin-top: 40px;
}
#fo_gray .txt2{
font-weight: bold;
}
#fo_gray .txt3{
font-weight: bold;
font-size: 1.1em;
}
#fo_gray .fukidashi{
width: 160px;
margin: 16px auto 26px;
display: block;
}
#fo_gray .contact_link{
background-color: #E9894A;
color: #ffffff;
display: block;
position: relative;
font-weight: bold;
font-size: 1.1em;
border-radius: 60px;
padding: 24px 0 18px;
margin: 32px auto;
text-align: center;
letter-spacing: 0.08em;
width: 100%;
max-width: 390px;
}
#fo_gray .contact_link::before{
content: '';
display: block;
position: absolute;
border-left: #ffffff 10px solid;
border-top: transparent 7px solid;
border-bottom: transparent 7px solid;
top: 50%;
right: 40px;
transform: translateY(-50%);
}
#fo_gray .contact_link span{
display: inline-block;
padding-bottom: 10px;
position: relative;
}
#fo_gray .contact_link span::before{
display: block;
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background-color: #ffffff;
}
#fo_gray .contact_link:hover span::before{
animation: 0.5s ease footerLine;
}
@keyframes footerLine{
0%{
left: auto;
right: 0;
width: 100%;
}
50%{
left: auto;
right: 0;
width: 0%;
}
51%{
left: 0;
right: auto;
width: 0%;
}
100%{
left: 0;
right: auto;
width: 100%;
}
}
#fo_gray .tel{
width: 260px;
margin: 0 auto 24px;
display: block;
}
#fo_gray .tel img{
display: block;
width: 100%;
}
#fo_gray .time{
font-size: 0.9em;
}
#fo_blue{
background-color: #185790;
padding: 40px 0 24px;
}
#fo_blue .logo{
display: block;
width: 310px;
margin: 0 auto 16px;
}
#fo_blue .address{
text-align: center;
color: #b9deff;
line-height: 1.6;
font-size: 0.9em;
}
#fo_blue .showroom{
color: #b9deff;
display: flex;
justify-content: center;
line-height: 1.6;
font-size: 0.9em;
margin: 52px auto 52px;
}
#fo_nav{
text-align: center;
}
#fo_nav > div{
display: inline-block;
vertical-align: top;
text-align: left;
margin-right: 64px;
}
#fo_nav > div:last-child{
margin-right: 0;
}
#fo_nav ul{
font-size: 0;
text-align: left;
}
#fo_nav li{
display: block;
font-size: 0.9rem;
}
#fo_nav a{
color: #ffffff;
padding: 10px 0;
box-sizing: border-box;
display: block;
position: relative;
}
#fo_nav a::before{
content: '';
position: absolute;
width: 0%;
height: 1px;
background-color: #ffffff;
left: 0;
bottom: 0;
display: block;
transition : all 0.2s ease 0s;
}
#fo_nav a:hover:before{
width: 70%;
}
#fo_nav .sub-menu a{
display: block;
padding-left: 36px;
position: relative;
}
#fo_nav .sub-menu a::after{
content: '― ';
left: 12px;
top: 50%;
transform: translateY(-50%);
display: block;
position: absolute;
}
#fo_blue .copyright{
color: #6695bf;
font-size: 0.8em;
text-align: center;
font-weight: bold;
display: block;
margin: 52px 0 0;
letter-spacing: 0.1em;
} #bottom_nav{
display: none;
background-color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 8px 0 6px;
z-index: 6;
}
#bottom_nav ul{
font-size: 0;
text-align: center;
display: flex;
justify-content: space-between;
width: 90%;
margin: 0 auto;
}
#bottom_nav li{
display: flex;
font-size: 1rem;
vertical-align: bottom;
}
#bottom_nav a{
display: block;
width: 38px;
padding: 0 12px;
margin-top: auto;
}
#bottom_nav img{
display: block;
width: 100%;
}
@media screen and (max-width:1200px){ #main_nav{
margin-top: 4px;
}
#main_nav li{
width: fit-content;
}
#header_contact{
top: -8px;
}
#main_nav .menu-main_menu-container li:nth-child(2)::before{
right: -2px;
}
#main_nav .menu-main_menu-container li:nth-child(3)::before{
right: -4px;
}
#main_nav .menu-main_menu-container li:nth-child(4)::before{
right: -3px;
}
#main_nav .menu-main_menu-container{
margin-right: 155px;
}
#header_contact{
width: 160px;
}
@media screen and (max-width:1024px){ #main_header{
border-top: none;
position: static;
}
#logo_link{
margin-left: 20px;
float: none;
}
#page_visual{
padding: 44px 0 52px;
margin-top: 0;
}
#page_visual .page_top_h1{
font-size: 1.8em;
text-align: center;
}
#page_visual .page_top_sub{
margin-top: 24px;
font-size: 0.9em;
}
#bread_list{
padding: 16px 0 0;
margin: 28px 0 0;
} #main_nav{
display: none;
}
#sub_nav{
display: block;
}
#fixed_menu{
display: none;
}
.sp_contact_btn{
display: block;
} #fo_gray{
padding: 52px 0 64px;
}
#fo_gray .subline{
display: block;
}
#fo_gray .left{
width: 100%;
display: block;
border-right: none;
border-bottom: #cccccc 1px solid;
padding: 0;
}
#fo_gray .info{
margin: 28px auto 52px;
}
#fo_gray .tiara{
width: 48px;
margin: 0 auto;
display: block;
}
#fo_gray .txt1{
font-size: 1.8rem;
text-align: center;
display: block;
width: 100%;
padding: 24px 0 0;
}
#fo_gray .right{
width: 100%;
display: block;
padding: 52px 0 0;
}
#fo_gray .tel{
margin: 0 auto 16px;
}
#fo_blue{
margin-bottom: 57px;
}
#fo_blue .showroom{
width: 90%;
} #bottom_nav{
display: block;
}
}
@media screen and (max-width: 768px){ .big_h2{
font-size: 1.8em;
letter-spacing: 0.2em;
line-height: 1.4;
}
.midium_h2{
font-size: 1.8em;
letter-spacing: 0.1em;
line-height: 1.4;
}
.midium_p{
font-size: 1.2em;
letter-spacing: 0.05em;
margin-bottom: 28px;
}
br.add_768{
display: inline;
}
.link_btn_wrap{
width: 90%;
} .none768{
display: none;
} .block768{
display: block;
} .row2_res1_flex_wrap{
display: block;
}
.row2_res1_flex{
display: block;
width: 100%;
} #fo_nav > div{
display: block;
width: 90%;
margin: 0 auto;
}
#fo_nav > div:last-child{
margin: 0 auto;
}
}
@media screen and (max-width: 540px){
br.add_540{
display: inline;
}
}
@media screen and (max-width: 320px){
br.add_320{
display: inline;
}
}