html{
font-size: 62.5%;
}
body{
margin: 0;
padding: 84px 0 0;
background: #FFF;
color: #333;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
position: relative;
line-height: 1.75;
}
*{
margin: 0;
padding: 0;
}
a{
color: #0052A6;
transition: 0.2s;
}
a:hover{
color: #00B7EE;
}
h1, h2, h3, h4{
line-height: 1.5;
}
.en_txt{
font-family: 'Spartan', sans-serif;
}
.sp{
display: none;
}
.inner{
margin: 0 auto;
padding: 50px 0 100px;
width: 1140px;
}
.align_c{
text-align: center;
} #header{
width: 100%;
height: 84px;
background: #FFF;
line-height: 1.5;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#header.hd_float{
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}
#header .hd_inner{
margin: 0 auto;
width: 1260px;
position: relative;
}
#logo{
margin-top: 15px;
width: 131px;
}
#logo img{
vertical-align: bottom;
width: 100%;
}
#main_navi{
position: absolute;
right: 0;
bottom: 0;
}
#main_navi ul{
display: flex;
align-items: flex-end;
list-style: none;
}
#main_navi a{
display: block;
padding: 0 1em 10px;
color: inherit;
text-decoration: none;
}
#main_navi a:hover{
color: #0052A6;
}
#main_navi .has_child{
flex-wrap: wrap;
position: relative;
transition: 0.3s;
}
#main_navi .child_navi{
display: none;
justify-content: center;
align-items: flex-start;
width: 100%;
padding: 10px 40px;
background: #F7F7F7;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
position: fixed;
top: 74px;
left: 0;
}
#main_navi .child_navi a{
padding: 1em;
}
@keyframes child_show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#main_navi .has_child:hover .child_navi{
display: flex;
opacity: 1;
}
#main_navi .child_navi{
animation: child_show 0.3s;
} .link_btn{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: 30px;
}
.link_btn a{
display: inline-block;
box-sizing: border-box; 
margin: 18px 0 0 20px;
padding: 12px 20px;
width: 240px;
border-bottom: 1px solid #0052A6;
font-family: 'Spartan', 'Noto Sans JP', sans-serif;
letter-spacing: 0.2em;
text-decoration: none;
transition: 0.2s;
position: relative;
}
.link_btn a:hover{
color: #333;
border-bottom-color: #333;
}
.link_btn a::after{
content: "";
width: 24px;
height: 6px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow.svg) no-repeat right center;
background-size: contain;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: 0.2s;
}
.link_btn a:hover::after{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow_2.svg);
right: -6px;
}
.sec_title{
margin: 50px 0;
font-size: 2rem;
color: #0052A6;
font-weight: normal;
letter-spacing: 0.1em;
}
.sec_title .en_txt{
margin-bottom: 0.1em;
font-size: 4.8rem;
color: #404040;
}  #main_visual{
width: 100%;
height: calc(100vh - 24px);
position: relative;
z-index: 1;
}
#main_visual::before{
content: "";
width: 50%;
height: calc(100% - 60px);
background: -webkit-linear-gradient(left, #8A00A6, #0052A6);
background: linear-gradient(to right, #8A00A6, #0052A6);
position: absolute;
top: 60px;
left: 0;
z-index: -1;
}
#main_visual::after{
content: "";
width: 80vw;
height: calc(100% - 60px);
background: #333 url(//gear-hd.co.jp/wp-content/themes/gear/images/main_img.jpg) no-repeat center center;
background-size: cover;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#main_visual h1{
width: 80vw;
color: #FFF;
font-size: 3.5vw;
letter-spacing: 0.05em;
position: absolute;
top: 50%;
left: 8vw;
transform: translateY(-50%);
}
#main_visual h1 .en_txt{
font-size: 6vw;
} #business{
position: relative;
z-index: 1;
}
#business::after{
content: "";
width: 100%;
height: 35vw;
max-height: 580px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/bg_biz.jpg) no-repeat center center;
background-size: cover;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#business .sec_title{
color: #FFF;
}
#business .sec_title .en_txt{
color: inherit;
}
.biz_navi{
display: flex;
background: #FFF;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
text-align: center;
}
.biz_navi a{
display: block;
flex: 1;
box-sizing: border-box;
padding: 30px;
border-left: 1px solid #E5E5E5;
text-decoration: none;
}
.biz_navi a:first-of-type{
border-left-width: 0;
}
.biz_navi a:hover{
color: #0052A6;
animation: biz_hover 0.3s;
animation-fill-mode: forwards;
}
@keyframes biz_hover{
100%{
background: -webkit-linear-gradient(top, #F2F0F7, #FFF);
background: linear-gradient(to bottom, #F2F0F7, #FFF);
}
}
.biz_navi a figure{
margin: 20px auto 40px;
width: 140px;
height: 140px;
position: relative;
}
.biz_navi a figure img{
width: 100%;
position: absolute;
top: 50%;
left: 0;
object-fit: contain;
transform: translateY(-50%);
}
.biz_navi a span{
display: block;
padding-bottom: 12px;
border-bottom: 1px solid #0052A6;
font-size: 2rem;
position: relative;
}
.biz_navi a span::after{
content: "";
width: 24px;
height: 6px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow.svg) no-repeat right center;
background-size: contain;
position: absolute;
top: calc((100% - 12px) / 2);
right: 0;
transform: translateY(-50%);
transition: 0.2s;
}
.biz_navi a:hover span::after{
right: -6px;
} #web_media{
position: relative;
z-index: 1;
}
#web_media::after{
content: "";
width: 50%;
height: 100%;
background: #F2F0F7;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.web_works_list{
display: flex;
justify-content: space-between;
}
.web_works_list a{
display: block;
width: 340px;
color: inherit;
text-decoration: none;
}
.web_works_list a:hover{
opacity: 0.75;
}
.web_works_list a figure{
width: 100%;
padding-top: 100%;
position: relative;
}
.web_works_list a figure img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
object-fit: contain;
}
.web_works_list h3{
margin-top: 1em;
font-size:  1em;
font-weight: normal;
} #web_works{
position: relative;
z-index: 1;
}
#web_works::after{
content: "";
width: 50%;
height: 100%;
background: #F2F0F7;
position: absolute;
top: 0;
left: 0;
z-index: -1;
} #works{
display: flex;
margin: 0 auto;
max-width: 1920px;
height: 26vw;
max-height: 500px;
background: #000;
}
#works a{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
flex-direction: column;
color: #FFF;
text-decoration: none;
position: relative;
z-index: 1;
}
#works a::after{
content: "";
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0.5;
transition: 0.3s;
}
#works a:hover::after{
opacity: 0.7;
}
#works .wk_media::after{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/media.jpg);
}
#works .wk_works::after{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/works.jpg);
}
#works a h3{
font-size: 2em;
letter-spacing: 0.2em;
}
#works a .jp_txt{
box-sizing: border-box;
margin-top: 60px;
padding: 0 20px 12px;
width: 240px;
border-bottom: 1px solid #FFF;
position: relative;
}
#works a .jp_txt::after{
content: "";
width: 24px;
height: 6px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow_3.svg) no-repeat right center;
background-size: contain;
position: absolute;
top: calc((100% - 12px) / 2);
right: 0;
transform: translateY(-50%);
transition: 0.2s;
}
#works a:hover .jp_txt::after{
right: -6px;
} #news .news_block{
display: flex;
justify-content: space-between;
margin-top: 100px;
}
#news .news_block:first-of-type{
margin-top: 50px;
}
.news_block .sec_title{
margin: 0;
color: inherit;
}
.news_block .sec_title .en_txt{
color: #0052A6;
}
.news_block .news_headline{
flex-shrink: 0;
width: 760px;
}
.news_headline a{
color: inherit;
text-decoration: none;
}
.news_headline a:hover{
color: #999;
}
.news_headline dl{
display: flex;
padding: 1em 20px;
border-bottom: 1px solid #E5E5E5;
}
.news_headline dl:first-of-type{
border-top: 1px solid #E5E5E5;
}
.news_headline dt{
flex-shrink: 0;
margin-right: 20px;
} #column{
position: relative;
z-index: 1;
}
#column::after{
content: "";
width: 50%;
height: 100%;
background: #F2F0F7;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#column ul.post_list{
margin-top: -50px;
}
.break_block{
height: 25vw;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/break.jpg) no-repeat center center;
background-size: cover;
} .msg_container{
display: flex;
}
.msg_container .msg_img{
flex-shrink: 0;
margin-left: 60px;
width: 420px;
}
.msg_container .msg_img img{
width: 100%;
}
.msg_content p{
margin-top: 1em;
}
.msg_content p:first-of-type{
margin-top: 0;
}
.msg_content p.msg_from{
margin-top: 2em;
text-align: right;
} #authored_books{
display: flex;
margin-top: 100px;
}
#authored_books .sec_title{
margin-top: 0;
width: 300px;
}
#authored_books .book_list{
display: flex;
justify-content: center;
list-style: none;
margin-left: 60px;
width: 100%;
}
#authored_books .book_list li{
flex: 1;
border-left: 1px solid #E5E5E5;
}
#authored_books .book_list a{
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
}
#authored_books .book_list a img{
margin-right: 20px;
max-width: 160px;
} #company{
display: flex;
margin: 0 auto;
max-width: 1920px;
height: 30vw;
max-height: 500px;
}
#company a{
display: flex;
flex: 1;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
padding-bottom: 30px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #FFF;
text-decoration: none;
position: relative;
z-index: 2;
}
#company .co_company{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/company.jpg);
}
#company .co_recruit{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/recruit.jpg);
}
#company a::after{
content: "";
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5));
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#company a:hover::after{
animation: co_hover 0.3s;
animation-fill-mode: forwards;
}
@keyframes co_hover{
100%{
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.2));
}
}
#company a h3{
padding-bottom: 12px;
width: 360px;
border-bottom: 1px solid #FFF;
font-size: 1.8rem;
font-weight: normal;
letter-spacing: 0.1em;
position: relative;
}
#company a h3::after{
content: "";
width: 24px;
height: 6px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow_3.svg) no-repeat right center;
background-size: contain;
position: absolute;
right: 0;
bottom: 16px;
transition: 0.2s;
}
#company a:hover h3::after{
right: -6px;
}
#company a h3 .en_txt{
font-size: 2em;
letter-spacing: 0.15em;
} #contact{
display: flex;
justify-content: center;
align-items: center;
height: 30vw;
max-height: 500px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/bg_contact.jpg) no-repeat center center;
background-size: cover;
}
#contact a{
display: flex;
justify-content: center;
align-items: center;
width: 720px;
height: 120px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-size: 1.5em;
letter-spacing: 0.2em;
position: relative;
}
#contact a:hover{
color: #404040;
background: rgba(255, 255, 255, 0.9);
}
#contact a::after{
content: "";
width: 36px;
height: 10px;
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow.svg) no-repeat right center;
background-size: contain;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
transition: 0.2s;
}
#contact a:hover::after{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/arrow_2.svg);
right: 14px;
} #page_header{
height: 30vw;
position: relative;
z-index: 1;
}
#page_header::before{
content: "";
width: 80vw;
height: calc(100% - 60px);
background: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_page.jpg) no-repeat center center;
background-size: cover;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#page_header::after{
content: "";
width: 50%;
height: calc(100% - 60px);
background: -webkit-linear-gradient(left, #8A00A6, #0052A6);
background: linear-gradient(to right, #8A00A6, #0052A6);
box-shadow: 20px 20px 40px rgba(83, 0, 166, 0.15);
position: absolute;
top: 60px;
left: 0;
z-index: -1;
opacity: 0.8;
}
#page_header h1{
color: #FFF;
font-size: 1.8vw;
font-weight: normal;
letter-spacing: 0.15em;
position: absolute;
top: calc(50% + 30px);
left: 50%;
transform: translate(-40vw, -50%);
}
#page_header h1 .en_txt{
margin-bottom: 0.1em;
font-size: 2.5em;
letter-spacing: 0.1em;
}
#page_header h1 .en_txt.parent_item{
margin-bottom: 1em;
font-size: 1em;
}
#page_header.hd_company::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_company.jpg);
}
#page_header.hd_business::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_business.jpg);
}
#page_header.hd_seo::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_seo.jpg);
}
#page_header.hd_sitema::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_sitema.jpg);
}
#page_header.hd_web::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_web.jpg);
}
#page_header.hd_works::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_works.jpg);
}
#page_header.hd_voice::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_voice.jpg);
}
#page_header.hd_recruit::before{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_recruit.jpg);
}
.page_container{
margin: 0 auto;
padding: 0 0 100px;
width: 960px;
}
.page_container h2{
margin: 3em 0 1em;
font-size: 1.75em;
position: relative;
}
.page_container h2:not([class]):not([style])::before{
content: "";
width: 30px;
height: 4px;
background: linear-gradient(to right, #8A00A6, #0052A6);
position: absolute;
top: 0.75em;
left: -40px;
z-index: -1;
}
.page_container h2 em{
color: #0052A6;
font-style: normal;
}
.page_container .crumbs + h2{
margin-top: 2em;
}
.page_container h3{
margin: 2em 0 1em;
font-size: 1.5em;
}
.page_container h3:not([class]):not([style]){
padding-bottom: 0.2em;
border-bottom: 1px solid #CCC;
position: relative;
}
.page_container h3:not([class]):not([style])::after{
content: "";
width: 4em;
height: 1px;
background: #0052A6;
position: absolute;
left: 0;
bottom: -1px;
}
.page_container h4{
margin: 1.5em 0 0.5em;
font-size: 1.25em;
}
.page_container p{
margin-top: 1em;
}
.crumbs{
margin: 20px 0;
font-size: 1.4rem;
}
.crumbs a{
color: inherit;
}
.crumbs a:hover{
color: #999;
}
.subtitle_en{
margin: 100px 0 2em;
font-size: 1.25em;
color: #0052A6;
font-weight: normal;
letter-spacing: 0.1em;
}
.subtitle_en .en_txt{
margin-bottom: 0.1em;
font-size: 1.8em;
color: #404040;
}
.subtitle_en:first-of-type{
margin-top: 50px;
}
.subtitle{
}
.subtitle_s{
}
.subtitle_s + p{
margin-top: 0;
}
.subtitle_ss{
}
.subtitle_ss + p{
margin-top: 0;
}
ol{
margin-left: 1.2em;
}
.page_container ol{
margin-top: 1em;
}
.page_container ol li{
margin-top: 0.5em;
}
.ul_marker{
list-style: none;
margin-top: -1em;
}
.ul_marker li{
margin-top: 1em;
padding-left: 1em;
position: relative;
}
.ul_marker li::before{
content: "";
width: 6px;
height: 6px;
background: #665B3D;
border-radius: 3px;
position: absolute;
top: 0.6em;
left: 0;
}
.tbl_1{
border-collapse: collapse;
margin: 1em auto 0;
width: 100%;
}
.tbl_1 th, .tbl_1 td{
padding: 1em;
border: 1px solid #CCC;
border-width: 1px 0;
}
.tbl_1 th{
color: #0052A6;
} .post_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
.post_list:after{
content: "";
display: block;
width: 360px;
}
.post_list li{
width: 360px;
margin-top: 50px;
}
.post_list li a{
display: block;
color: inherit;
text-decoration: none;
}
.post_list a:hover{
opacity: 0.7;
}
.post_list .post_thumb{
width: 100%;
height: 240px;
overflow: hidden;
position: relative;
transition: 0.2s;
}
.post_list .post_thumb img{
width: 100%;
height: 100%;
object-fit: cover;
}
.post_list .thumb_blank{
border-top: 1px solid #E5E5E5;
}
.post_list .post_meta{
margin-top: 0.5em;
}
.post_list .post_title{
margin-top: 0.5em;
font-size: 1.1em;
} .local-navigation{
margin-top: 50px;
text-align: center;
}
.local-navigation .page-numbers{
display: inline-block;
margin: 10px 1px 0;
padding: 0 10px;
box-sizing: border-box;
min-width: 36px;
line-height: 36px;
font-size: 1.6rem;
}
.local-navigation a.page-numbers{
background: #F2F2F2;
color: inherit;
text-decoration: none;
}
.local-navigation .page-numbers.current,
.local-navigation a.page-numbers:hover{
background: #0052A6;
color: #FFF;
} .post_content{
margin-top: 20px;
}
.post_content .post_title{
margin-top: 1em;
padding-bottom: 0.3em;
border-bottom: 1px solid #0052A6;
}
.post_content .post_meta{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 1em;
}
.post_content p{
margin-top: 1em;
}
.post_content .eyecatch{
text-align: center;
}
.post_content .eyecatch img{
max-width: 100%;
max-height: 820px;
}
.post_content img{
max-width: 100%;
height: auto;
}
.post_content h2:not([class]):not([style]){
color: #0052A6;
}
.page_container .post_content h2:not([class]):not([style])::before{
content: none;
}
.post_container{
display: flex;
justify-content: space-between;
}
.main_col{
width: 820px;
}
.side_col{
width: 280px;
}
.side_title{
}
.side_title:first-child{
margin-top: 0;
}
ul.side_list{
list-style: none;
margin-top: 0.5em;
border-top: 1px solid #E5E5E5;
font-size: 1.4rem;
}
.side_list li{
border-bottom: 1px solid #E5E5E5;
}
.side_list li > a{
display: block;
padding: 0.8em 10px;
color: inherit;
line-height: 1.5em;
text-decoration: none;
}
.side_list li > a:hover{
background: #FAFAFA;
}
.recent_post{
background: #F2F0F7;
}
.recent_post .inner{
padding: 60px 0;
}
.recent_post h3{
font-size: 1.5em;
}
.recent_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
.recent_list li{
margin-top: 20px;
padding: 10px;
box-sizing: border-box;
width: calc(50% - 10px);
background: #FFF;
}
.recent_list a{
display: flex;
color: inherit;
text-decoration: none;
}
.recent_list a:hover{
opacity: 0.7;
}
.recent_list .post_thumb{
flex-shrink: 0;
margin-right: 10px;
width: 30%;
}
.recent_list .post_thumb img{
vertical-align: bottom;
width: 100%;
} #pagetop{
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
}
#pagetop:hover{
bottom: 26px;
}
#footer{
background: #333;
color: #D9D9D9;
font-size: 1.4rem;
}
#footer_navi{
padding-top: 40px;
}
#footer_navi > ul{
display: flex;
justify-content: center;
list-style: none;
}
#footer_navi > ul > li{
margin: 0 30px;
}
#footer_navi > ul > li > ul{
list-style: none;
font-size: 1.3rem;
}
#footer_navi > ul > li > ul li{
padding-left: 18px;
position: relative;
}
#footer_navi > ul > li > ul li::before{
content: "";
width: 12px;
height: 1px;
background: #999;
position: absolute;
top: 0.9em;
left: 0;
}
#footer_navi a{
color: inherit;
text-decoration: none;
}
#footer_navi a:hover{
text-decoration: underline;
}
#footer_navi > ul > li > ul a{
color: #999;
}
#copyright{
padding: 30px 0;
font-size: 1.2rem;
text-align: center;
}@media screen and (max-width: 1139px){
body{
font-family: sans-serif;
font-size: 1.4rem;
overflow-x: hidden;
}
@media screen and (min-width: 740px){
body{
font-size: 1.6rem;
}
}
h1, h2, h3, h4{
font-family: 'Noto Sans JP', sans-serif;
}
img, iframe{
max-width: 100%;
}
.pc{
display: none;
}
.sp{
display: block;
}
.inner{
padding: 20px 0 60px;
width: calc(690/750 * 100vw);
} #header{
padding: 10px 0;
box-sizing: border-box;
height: 84px;
}
#header .hd_inner{
width: auto;
}
#logo{
margin-top: 0;
}
#main_navi{
display: none;
margin: 0;
width: 100vw;
height: calc(100vh - 74px);
overflow-y: auto;
background: #333;
position: absolute;
top: 100%;
left: 0;
right: auto;
bottom: auto;
}
#main_navi ul{
display: block;
}
#main_navi a{
display: block;
padding: 1em 2em;
color: #D9D9D9;
}
#main_navi a:first-of-type{
border-top-width: 0;
}
#main_navi .child_navi{
display: block;
margin-left: 2em;
padding: 0;
width: auto;
background: #4D4D4D;
position: relative;
top: auto;
}
#main_navi .child_navi li{
margin: 0;
}
#menu_btn{
box-sizing: border-box;
width: 36px;
height: 20px;
border: solid #333;
border-width: 1px 0;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
#menu_btn::before,
#menu_btn::after{
content: "";
width: 100%;
height: 1px;
background: #333;
position: absolute;
top: 50%;
left: 0;
}
#menu_btn.close{
border: 0;
}
#menu_btn.close::after{
transform: rotate(45deg);
transform-origin: center;
}
#menu_btn.close::before{
transform: rotate(-45deg);
transform-origin: center;
} .link_btn{
margin-top: calc(30/750 * 100vw);
}
.sec_title{
margin: 30px 0;
font-size: 1.3em;
}
.sec_title .en_txt{
font-size: 2.25em;
}  #main_visual{
height: 100vw; }
@media screen and (max-width: 420px){
#main_visual{ }
}
#main_visual h1{
width: auto;
font-size: 6vw;
left: 20px;
}
#main_visual h1 .en_txt{
font-size: 12vw;
}
@media screen and (min-width: 740px){
#main_visual h1{
font-size: 5vw;
}
#main_visual h1 .en_txt{
font-size: 10vw;
}
} #business::after{
height: 100vw;
}
.biz_navi{
display: block;
margin: 0 auto;
width: 90%;
max-width: 380px;
}
.biz_navi a{
padding: 24px;
border-left-width: 0;
border-top: 1px solid #E5E5E5;
}
.biz_navi a:first-of-type{
border-top-width: 0;
}
.biz_navi a figure{
margin: 10px auto 30px;
}
.biz_navi a span{
font-size: 1.25em;
} .web_works_list{
display: block;
margin: 0 auto;
width: 90%;
max-width: 380px;
}
.web_works_list a{
margin-top: 2em;
width: auto;
} #works{
display: block;
height: auto;
max-height: none;
}
#works a{
width: 100%;
height: 50vw;
max-height: 360px;
}
#works a .jp_txt{
margin-top: 1.4em;
font-size: 1.15em;
} #news .news_block{
display: block;
margin-top: 60px;
}
#news .news_block:first-of-type{
margin-top: 40px;
}
.news_block .news_headline{
margin-top: 30px;
width: auto;
}
.news_headline dl{
padding: 1em 10px;
} #column ul.post_list{
margin-top: 0;
} .msg_container{
display: block;
}
.msg_container .msg_img{
margin: 30px auto 0;
width: auto;
max-width: 420px;
} #authored_books{
display: block;
margin-top: 60px;
}
#authored_books .sec_title{
width: auto;
}
#authored_books .book_list{
display: block;
margin-left: 0;
}
#authored_books .book_list li{
border-left: 0;
border-top: 1px solid #E5E5E5;
}
#authored_books .book_list a{
justify-content: flex-start;
padding: 20px;
}
#authored_books .book_list a img{
width: 40%;
} #company{
display: block;
height: auto;
max-height: none;
}
#company a{
height: 50vw;
}
#company a h3{
width: 80%;
}
@media screen and (max-width: 420px){
#company a{
padding-bottom: 20px;
}
#company a h3{
margin: 0 20px;
width: 100%;
font-size: 1.6rem;
}
} #contact{
height: 40vw;
max-height: none;
}
#contact a{
width: 90%;
max-width: 720px;
height: 20vw;
max-height: 120px;
}
@media screen and (max-width: 420px){
#contact a{
font-size: 1.25em;
}
#contact a::after{
width: 24px;
height: 6px;
right: 10px;
}
} #page_header{
height: 80vw;
overflow-x: hidden;
}
#page_header h1{
font-size: 1.5em;
left: 20px;
transform: translate(0, -50%);
}
#page_header.post_hd{
background-image: url(//gear-hd.co.jp/wp-content/themes/gear/images/hd_post_sp.jpg);
}
@media screen and (min-width: 740px){
#page_header{
height: 50vw;
}
}
@media screen and (max-width: 420px){
#page_header h1{
font-size: 1.3em;
}
#page_header h1 .en_txt.parent_item{
margin-top: -1em;
}
}
.page_container{
padding: 0 0 60px;
width: calc(690/750 * 100vw);
}
.page_container p{
line-height: 1.75;
}
@media screen and (max-width: 420px){
.page_container h2:not([class]):not([style]){
margin-left: 0.7em;
}
}
.crumbs{
margin: 10px 0;
font-size: 1.2rem;
}
.subtitle{
}
.tbl_1 th, .tbl_1 td{
padding: 0.5em;
} .post_list{
display: block;
}
.post_list:after{
display: none;
}
.post_list li{
width: auto;
margin-top: 20px;
}
.post_list li a{
display: flex;
}
.post_list .post_thumb{
flex-shrink: 0;
margin-right: 10px;
width: 30vw;
height: 30vw;
}
.post_list .thumb_blank{
width: 10px;
border-top-width: 0;
border-left: 1px solid #E5E5E5;
}
.post_list .post_data{
width: calc(100% - 30vw - 10px);
}
.post_list .post_meta{
margin-top: 0;
}
.side_col{
margin-top: 60px;
} .post_container{
display: block;
}
.main_col,
.side_col{
width: auto;
}
.main_col .eyecatch{
margin: 0 auto;
max-width: 720px;
}
.main_col .eyecatch img{
max-height: 720px;
}
.main_col .post_content{
margin-top: 10px;
}
.yt_movie{
margin: 0 auto;
padding-top: 56.25%;
max-width: 560px;
position: relative;
}
.yt_movie iframe{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.recent_post .inner{
padding: 30px 0;
}
.recent_list{
display: block;
}
.recent_list li{
margin-top: 10px;
padding: 5px;
width: auto;
} #pagetop{
right: 6px;
bottom: 40px;
}
#footer_navi > ul{
display: block;
}
#footer_navi > ul > li > ul li::before{
top: 0.8em;
}
#copyright{
padding: 20px 0;
}
}