/*
Theme Name: Sample Theme
Theme URI: http://sample.com/
Author: Brueno Design
Author URI: http://brueno.jp/
Description: This is "Sample" theme.
*/

/*
	 1: reset
	 2: common
	 3: header
	 4: footer
	 5: main
*/



/* --------------------------------------------------------------
    1: reset
-------------------------------------------------------------- */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

svg:not(:root) {
    overflow: hidden
}

hr {
    box-sizing: content-box
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

html {
    overflow-y: scroll
}

html, body, div, span {
    border: 0
}

html, body, div, span, object {
    margin: 0;
    padding: 0;
    outline: 0
}

iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b,
i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer,
header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400
}

ul li {
    list-style: none
}

object, embed {
    border: 0;
    vertical-align: bottom;
    outline: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    background: 0 0;
    outline: 0
}

a img {
    border: none;
    text-decoration: none;
    outline: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption, th {
    text-align: left
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input, select {
    vertical-align: middle
}

label {
    cursor: pointer
}

img {
    width: 100%;
    border: none;
    vertical-align: bottom;
	touch-callout: none;
	-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
	pointer-events: none;
}



/* --------------------------------------------------------------
    2: common
-------------------------------------------------------------- */

@font-face {
    font-family:"notosans_m";
    src:url("common/font/notosans_m.eot?#iefix");
    src:url("common/font/notosans_m.eot?#iefix") format("eot"),
    url("common/font/notosans_m.woff") format("woff"),
    url("common/font/notosans_m.ttf") format("truetype");
}

html {
}

body {
    -webkit-text-size-adjust: 100%;
	font-family: 'notosans_m',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 1.8;
	letter-spacing: 0.03em;
	background: #ededea;
}

input, textarea {
   font-family: 'notosans_m',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

* html body, * html input, * html textarea {
    font-family: 'notosans_m',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

p a,
dd a,
ul.news li a,
.detailTextBox ul a {
	position: relative;
	display: inline-block;
    -webkit-tap-highlight-color: rgba(189, 185, 185, .2);
    -webkit-transition: color .4s cubic-bezier(.22, .57, .27, .98) 0;
    transition: color .4s;
}

main p a::after,
main dd a::after,
main ul.news li a::after,
.detailTextBox ul a::after {
	position: absolute;
	bottom: 2px;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #8a8a8a;
	transition: .4s;
}

.pc main p a:hover::after,
.pc main dd a:hover::after,
.pc main ul.news li a:hover::after,
.pc .detailTextBox ul a:hover::after {
	width: 100%;
}

a:link {
    color: #8a8a8a;
    text-decoration: none;
}

a:visited {
    color: #8a8a8a;
}

.pc a:hover {
    color: #000;
    text-decoration: none;
}

a:active {
    color: #8a8a8a;
}

::selection {
    background: rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased
}


/* ---- clearFix ---- */

.clearFix:before,
.clearFix:after{
	content:"";
	display: table;
}
.clearFix:after{
	clear:both;
}
.clearFix{
	*zoom:1; /*IE6,7対策（haslayout対策）*/
}


/* ---- Footerをページ下部に設定 ---- */

body , html {
	height: 100%;
}
  
#container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
    /* padding-bottom: 220px; */
}
  
main {
	position: relative;
	width: 100%;
}
  
/*
footer {
	position: absolute;
	width: 100%;
	height: 220px;
	bottom: 0;
}
*/

.inline {
    display: inline;
}

 



/* --------------------------------------------------------------
    3: header
-------------------------------------------------------------- */

header {
    font-size: 13px;
}


/* ↓ nav.pc ↓ */

header nav.pc h1 {
	position: fixed;
	top: 50px;
	left: calc(5vw - 0px);
	/* width: 110px; */
	/* height: 25px; */
    width: 154px;
	height: 25px;
	z-index: 10;
}

header nav.pc h1 a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	/* background: url(common/img/header_logo.svg) no-repeat; */
    background: url(common/img/header_logo_goto_jp.svg) no-repeat;
	transition: all 0.5s 0s ease;
}

.pc header nav.pc h1 a:hover {
	opacity: 0.4;
}

header nav.pc ul.gNav {
	position: fixed;
	left: 5vw;
	bottom: 40px;
	line-height: 2.2;
	z-index: 10;
	transition: all 0.5s 0s ease;
}


header nav ul.gNav li a {
    display: block;
	height: 30px;
	text-indent: -9999px;
    transition: all 0.5s 0s ease;
}

.pc header nav ul.gNav li a:hover {
	opacity: 0.4;
}

header nav ul.gNav li.about a {
    width: 139px;
    background: url(common/img/header_nav_about_4.svg) no-repeat;
}

header nav ul.gNav li.shaft a {
    width: 164px;
    background: url(common/img/header_nav_shaft_4.svg) no-repeat;
}

header nav ul.gNav li.semiorder a {
    width: 199px;
    background: url(common/img/header_nav_semiorder_4.svg) no-repeat;
}

header nav ul.gNav li.equipment a {
    width: 65px;
    background: url(common/img/header_nav_equipment_4.svg) no-repeat;
}

header nav ul.gNav li.company a {
    width: 65px;
    background: url(common/img/header_nav_company_4.svg) no-repeat;
}

header nav ul.gNav li.news a {
    width: 60px;
    background: url(common/img/header_nav_news_4.svg) no-repeat;
}

header nav ul.gNav li.recruit a {
    width: 65px;
    background: url(common/img/header_nav_recruit_4.svg) no-repeat;
}

header nav ul.gNav li.contact a {
    width: 65px;
    background: url(common/img/header_nav_contact_4.svg) no-repeat;
}

header nav ul.gNav li.faq a {
    width: 103px;
    background: url(common/img/header_nav_faq_4.svg) no-repeat;
}

header nav ul.gNav li.g-goods a {
    width: 107px;
    background: url(common/img/header_nav_g-goods_4.svg) no-repeat;
}

header nav ul.gNav li.insta a {
	width: 18px;
	height: 18px;
	margin-top: 10px;
	background: url(common/img/header_insta.svg) no-repeat;
}


/* ↑ nav.pc ↑ */


/* ↓ nav.sp ↓ */

header nav.sp {
	display: none;
}


header nav.sp h1 {
	position: fixed;
	top: 25px;
	left: 5vw;
	width: 130px;
	height: 25px;
	z-index: 20;
	transition: all 0.5s 0s ease;
}

header nav.sp h1 a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	/* background: url(common/img/header_logo.svg) no-repeat; */
    background: url(common/img/header_logo_goto_jp.svg) no-repeat;
	background-size: contain;
	transition: all 0.5s 0s ease;
}

.pc header nav.sp h1 a:hover {
	opacity: 0.4;
}

header nav.sp .menu {
    position: fixed;
    display: block;
    top: 30px;
    right: 5vw;
    width: 24px;
    height: 9px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    z-index: 20;
}

header nav.sp .menu:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #707070;
    transition: 0.4s;
}

header nav.sp.on .menu:before {
    top: 4px;
}

header nav.sp .menu:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #707070;
    transition: 0.4s;
}

header nav.sp.on .menu:after {
    bottom: 4px;
}

header nav.sp ul.gNav {
	position: fixed;
	left: -100px;
	bottom: 30px;
	line-height: 2.2;
    opacity: 0;
	z-index: 20;
	transition: all 0.5s 0s ease;
}

header nav.sp.on ul.gNav {
	left: 40px;
    opacity: 1;
}

header nav.sp div.insta {
	position: fixed;
	right: -100px;
	bottom: 30px;
	text-indent: -9999px;
    opacity: 0;
    z-index: 20;
	transition: all 0.5s 0s ease;
}

header nav.sp.on div.insta {
	right: 40px;
    opacity: 1;
}

header nav.sp div.insta a {
	display: block;
	width: 18px;
	height: 18px;
	background: url(common/img/header_insta.svg) no-repeat;
	transition: all 0.5s 0s ease;
}

.pc header nav.sp div.insta a:hover {
	opacity: 0.3;
}

header nav.sp .base {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #ccc;
	opacity: 0;
	z-index: 10;
}

/* ↑ nav.sp ↑ */

/*
header nav.pc ul.gNav a:link,
header nav.sp ul.gNav a:link {
    color: #000;
    text-decoration: none;
	transition: all 0.3s 0s ease;
}

header nav.pc ul.gNav a:visited,
header nav.sp ul.gNav a:visited {
    color: #000;
}

.pc header nav.pc ul.gNav a:hover,
.pc header nav.sp ul.gNav a:hover {
    color: #000;
    text-decoration: none;
	opacity: 0.3;
}

header nav.pc ul.gNav a:active,
header nav.sp ul.gNav a:active {
    color: #000;
}
*/

header p#breadcrumbs {
    margin-top: 50px;
    margin-left: calc(15vw + 150px);
}
	
	
@media only screen and (max-width: 800px) {
	header nav.pc {
		display: none;
	}
	header nav.sp {
		display: block;
	}
    header p#breadcrumbs {
        width: calc(90vw - 195px);
        margin-top: 25px;
        margin-left: calc(5vw + 150px);
        font-size: 11px;
        text-align: center;
    }
}

@media only screen and (max-width: 500px) {
	header nav.sp h1 {
	}
    header p#breadcrumbs {
        width: auto;
        margin-top: 100px;
        margin-left: calc(5vw);
        text-align: left;
    }
}

@media only screen and (min-width: 800px) and (max-height: 500px) {
	header nav.pc {
		display: none;
	}
	header nav.pc h1 {
		display: none;
	}
	header nav.pc ul.gNav {
		left: -100px;
	}
	
	header nav.sp {
		display: block;
	}
}





/* --------------------------------------------------------------
    5: main
-------------------------------------------------------------- */

main {
    width: calc( 85vw - 150px );
	margin: 0 0 0 auto;
}

main .conts {
    /* margin: 0 0 100px 0; */
    padding-top: 150px;
    padding-right: 5vw;
}

main .conts h2 {
    display: block;
    height: 30px;
    margin-bottom: 70px;
    text-indent: -9999px;
}

main .conts p {
    max-width: 700px;
    margin-bottom: 20px;
}

main .conts p.read {
    margin-bottom: 70px;
}

main .conts .readArea {
    margin-bottom: 70px;
}


main .note {
    font-size: 12px;
}

@media only screen and (max-width: 800px) {
	main {
		width: 100vw;
	}
    main .conts {
        margin: 50px 0 0 0;
        padding: 150px 5vw 0 5vw;
    }
    main .conts:first-of-type {
        margin-top: 0;
    }
}

@media only screen and (max-width: 500px) {
    main .conts {
        margin: 50px 0 0 0;
        padding: 85px 5vw 0 5vw;
    }
}


/* ↓ body.top ↓ */

#topVisual {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin-left: calc(-15vw - 150px);
}

#topVisualCatch1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    max-width: 600px;
    height: auto;
}

#topVisualCatch2 {
    position: absolute;
    bottom: 60px;
    right: 50px;
    width: 50vw;
    max-width: 500px;
    height: auto;
}

#topVisualCatch3 {
    position: absolute;
    bottom: 60px;
    right: 50px;
    width: 50vw;
    max-width: 600px;
    height: auto;
}

@media only screen and (max-width: 900px) {
   #topVisualCatch {
        width: 60vw;
    }
}

@media only screen and (max-width: 800px) {
    #topVisual {
        margin-left: 0;
    }
    #topVisualCatch1 {
        width: 70vw;
    }
    #topVisualCatch2 {
        bottom: 40px;
        right: 60px;
        width: calc(100vw - 120px);
        max-width: none;
    }
    #topVisualCatch3 {
        bottom: 40px;
        right: 30px;
        width: calc(100vw - 60px);
    }
}

main .conts#topBanner {
    margin-top: 70px;
    padding-top: 0;
}



#topBanner .bannerArea {
    position: relative;
    margin-top: 10px;
}

#topBanner .bannerArea a {
    display: block;
    width: 100%;
    height: 100%;
}

#topBanner .bannerArea h2 {
    position: absolute;
    top: 50%;
    left: 50px;
    translate: 0 -50%;
    display: block;
    height: 100px;
    text-indent: -9999px;
}

#topBanner .bannerArea a .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: all 0.5s 0s ease;
}

#topBanner .bannerArea.shaft h2 {
    width: 400px;
    max-width: 100%;
    background: url(common/img/banner_shaft_h2_4.svg) 0 0 no-repeat;
}

#topBanner .bannerArea.shaft a .cover {
    opacity: 0.35;
}

#topBanner .bannerArea.semiorder h2 {
    width: 400px;
    max-width: 100%;
    background: url(common/img/banner_semiorder_h2_4.svg) 0 0 no-repeat;
}

#topBanner .bannerArea.semiorder a .cover {
    opacity: 0.4
}

#topBanner .bannerArea.equipment h2 {
    width: 400px;
    max-width: 100%;
    background: url(common/img/banner_equipment_h2_4.svg) 0 0 no-repeat;
}

#topBanner .bannerArea.equipment a .cover {
    opacity: 0.2;
}

#topBanner .bannerArea.g-goods h2 {
    width: 450px;
    max-width: 100%;
    background: url(common/img/banner_g-goods_h2_4.svg) 0 0 no-repeat;
}

#topBanner .bannerArea.g-goods a .cover {
    opacity: 0.35;
}

#topBanner .bannerArea a:hover .cover {
    opacity: 0.8;
}

@media only screen and (max-width: 960px) {
    #topBanner .bannerArea h2 {
        left: 30px;
        scale: 0.7;
        transform-origin: center left;
    }
}







main .conts#about h2 {
    background: url(common/img/top_about_h2.svg) 0 0 no-repeat;
}

main .conts#shaft h2 {
    background: url(common/img/top_shaft_h2_3.svg) 0 0 no-repeat;
}

main .conts#shaftGear h2 {
    background: url(common/img/shaft_gear_h2.svg) 0 0 no-repeat;
}

main .conts#shaftEccentricity h2 {
    background: url(common/img/shaft_eccentricity_h2.svg) 0 0 no-repeat;
}

main .conts#shaftGrinding h2 {
    background: url(common/img/shaft_grinding_h2.svg) 0 0 no-repeat;
}

main .conts#shaftRack h2 {
    background: url(common/img/shaft_rack_h2.svg) 0 0 no-repeat;
}

main .conts#shaftRolling h2 {
    background: url(common/img/shaft_rolling_h2.svg) 0 0 no-repeat;
}

main .conts#shaftBroaching h2 {
    background: url(common/img/shaft_broaching_h2.svg) 0 0 no-repeat;
}

main .conts#shaftOthers h2 {
    background: url(common/img/shaft_others_h2.svg) 0 0 no-repeat;
}


main .conts#equipment h2 {
    background: url(common/img/top_equipment_h2.svg) 0 0 no-repeat;
}

main .conts#company h2 {
    background: url(common/img/top_company_h2.svg) 0 0 no-repeat;
}

main .conts#news h2 {
    background: url(common/img/top_news_h2.svg) 0 0 no-repeat;
}

main .conts#recruit h2 {
    background: url(common/img/top_recruit_h2.svg) 0 0 no-repeat;
}

main .conts#recruitEntry h2 {
    background: url(common/img/top_recruit_entry_h2.svg) 0 0 no-repeat;
}

main .conts#contact h2 {
    background: url(common/img/top_contact_h2.svg) 0 0 no-repeat;
}

main .conts#faq h2 {
    background: url(common/img/top_faq_h2.svg) 0 0 no-repeat;
}

main .conts#semiorder h2 {
    background: url(common/img/top_semiorder_h2.svg) 0 0 no-repeat;
}

main .conts#product h2 {
    background: url(common/img/top_product_h2.svg) 0 0 no-repeat;
}

main .conts#process h2 {
    background: url(common/img/top_process_h2.svg) 0 0 no-repeat;
}

main .conts#history h2 {
    background: url(common/img/top_history_h2.svg) 0 0 no-repeat;
}

main .conts#error404 h2 {
    height: 54px;
    background: url(common/img/top_erroe404_h2.svg) 0 0 no-repeat;
}

main .conts .photoWrap {
    position: relative;
    margin-top: 70px;
}

main .conts .photoWrap img {
    margin-top: 10px;
}

main .contsBlockA {
    padding-top: 30px;
    padding-bottom: 70px;
    border-bottom: 1px solid #ccc;
    transition: all 0.5s 0s ease;
}

main .contsBlockA p {
    margin-top: 20px;
}

main .contsBlockA p:first-of-type {
    margin-top: 0;
}

main .contsBlockA dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

main .contsBlockA dt {
    width: 4.5em;
}

main .contsBlockA dd {
    width: calc(100% - 4.5em);
}

main .contsBlockA.textPhoto {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

main .contsBlockA.textPhoto .textArea {
    width: calc(100% / 3 * 2 - 10px);
}

main .contsBlockA.textPhoto .photoArea {
    width: calc(100% / 3);
    padding-top: 6px;
    padding-bottom: 6px;
}

main .contsBlockA span {
    display: inline-block;
}

main .contsBlockA:first-of-type {
    border-top: 1px solid #ccc;
}

main .shaftSup.contsBlockA:first-of-type {
    /* border-top: none; */
}



a.boxLink {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    padding: 10px 40px 10px 20px;
    font-size: 12px;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: all 0.5s 0s ease;
}

a.boxLink:after {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    left: calc(100% - 26px);
    display: block;
    width: 10px;
    height: 100%;
    background: url(common/img/icon_arrow_right_s.svg) 0 0 no-repeat;
    background-size: 10px 20px;
    transition: all 0.5s 0s ease;
}


.pc a.boxLink:hover {
    padding: 10px 36px 10px 24px;
    background: #fff;
}

a.boxLink:hover::after {
    width: 10px;
}

a.boxLink.right {
    position: absolute;
    top: 0;
    right: 0px;
    margin-right: 0;
}

@media only screen and (max-width: 420px) {
    a.boxLink.right {
        padding: 6px 25px 6px 10px;
        font-size: 11px;
    }
    .pc a.boxLink:hover {
        padding: 6px 21px 6px 14px;
    }
    a.boxLink:after {
        left: calc(100% - 18px);
    }
}



main .contsBlockA a.areaLink {
    position: relative;
    display: block;
    margin-top: -15px;
    margin-bottom: -50px;
    padding-top: 15px;
    padding-bottom: 50px;
    color: #000;
    transition: all 0.5s 0s ease;
}

main .contsBlockA a.areaLink:after {
    content: "";
    position: absolute;
    top: 18px;
    right: 0;
    display: block;
    width: 10px;
    height: 20px;
    background: url(common/img/icon_arrow_right.svg) 0 0 no-repeat;
    transition: all 0.5s 0s ease;
}

body.pc main .contsBlockA a.areaLink > p,
body.pc main .contsBlockA a.areaLink > dl {
    transition: all 0.5s 0s ease;
}

body.pc main .contsBlockA a.areaLink:hover {
    background: #e4e4e0;
}

body.pc main .contsBlockA a.areaLink:hover > p,
body.pc main .contsBlockA a.areaLink:hover > dl {
    transform: translateX(15px);
}

body.pc main .contsBlockA a.areaLink:hover:after {
    right: 15px;
}


.rinkBox {
    font-size: 12px;
}

.rinkBox a {
    position: relative;
    display: inline-block;
    padding: 7px 40px 7px 20px;
    color: #000;
    border: 1px solid #ccc;
    transition: all 0.5s 0s ease;
}

.pc .rinkBox a:hover {
    /* opacity: 0.5; */
    background: #dadada;
}

.rinkBox a::after {
    display: none;
}

.rinkBox a::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: auto;
    left: auto;
    right: 17px;
    display: block;
    width: 10px;
    height: 1.6em;
    background: url(common/img/icon_arrow_right.svg) left center no-repeat;
    transition: all 0.5s 0s ease;
}

.pc .rinkBox a:hover::after {
    width: 10px;
    left: auto;
    right: 10px;
}


main .areaAccordion {
    position: relative;
    padding-top: 15px;
    padding-bottom: 50px;
    color: #000;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.5s 0s ease;
}

main .areaAccordion .iconPlus {
    position: absolute;
    top: 18px;
    right: 0;
    width: 15px;
    height: 15px;
    transition: all 0.5s 0s ease;
}

main .areaAccordion .iconPlus span:first-child {
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    transition: all 0.5s 0s ease;
}

main .areaAccordion .iconPlus span:last-child {
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    transform: rotate(90deg);
}

body.pc main .areaAccordion .box {
    display: none;
    margin-top: 20px;
    padding: 0 15px;
}

body.pc main .areaAccordion > p,
body.pc main .areaAccordion > dl {
    width: calc(100% - 40px);
    transition: all 0.5s 0s ease;
}

body.pc main .areaAccordion:hover {
    background: #e4e4e0;
}

body.pc main .areaAccordion:hover > p,
body.pc main .areaAccordion:hover > dl {
    transform: translateX(15px);
}

body.pc main .areaAccordion:hover .iconPlus {
    right: 15px;
}

main .areaAccordion.-on {
    background: #e4e4e0;
}

body.pc main .areaAccordion.-on > p,
body.pc main .areaAccordion.-on > dl {
    transform: translateX(15px);
}

body.pc main .areaAccordion.-on .iconPlus {
    right: 15px;
    transform: rotate(90deg);
}

body.pc main .areaAccordion.-on .iconPlus span:first-child {
    opacity: 0;
}


main .conts#shaft .headArea h4 {
    margin-left: 1px;
}


main .conts#equipment .thumbBox img {
    filter: grayscale(100%);
}

main .conts#semiorder .contsBlockA:first-of-type,
main .conts#recruit .contsBlockA:first-of-type,
main .conts#recruit .contsBlockA:first-of-type,
main .conts#contact > .contsBlockA:first-of-type {
    padding-top: 0;
    border-top: none;
}

main .conts#company img {
    /* filter: grayscale(100%); */
}

main .conts#company .contsBlockA dl {
    margin-top: 20px;
}

main .conts#company .suppliers span {
    margin-right: 2em;
}

main .conts#company .suppliers .note {
    position: absolute;
    right: 5vw;
    margin-top: 5px;
    font-size: 10px;
}

main .conts#news .contsBlockA dt {
    width: 7em;
}

main .conts#news .contsBlockA dd {
    width: calc(100% - 10em);
}

main .conts#news .contsBlockA dd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main .conts#contact .contsBlockA:first-of-type {
    border-top: none;
}

main .conts#contact .contsBlockA dt {
    width: 8em;
}

main .conts#contact .contsBlockA dd {
    width: calc(100% - 8em);
}

#orderForm input {
	width: 100%;
	border: none;
	padding-bottom: 0px;
    background: none;
    transform: translateY(-2px);
}

#orderForm input[type="checkbox"],
#orderForm input[type="radio"] {
    width: 1em;
}

#orderForm label {
	display: inline-block;
	width: 100%;
}
#orderForm textarea {
	width: 100%;
	height: 120px;
	border: none;
	padding-bottom: 0;
	margin-top: 0;
    background: none;
    transform: translateY(-2px);
}
#orderForm input[type='text']:focus,
#orderForm input[type='email']:focus,
#orderForm textarea:focus {
	outline: none;
}
#orderForm input[type='text']:focus::after,
#orderForm input[type='email']:focus::after,
#orderForm textarea:focus::after {
	outline: none;
}
:placeholder-shown {
    color: #aaa;
	transition: all 0.4s 0s ease;
}
::-webkit-input-placeholder {
    color: #aaa;
	transition: all 0.4s 0s ease;
}
#orderForm input[type='text']:focus:placeholder-shown,
#orderForm input[type='email']:focus:placeholder-shown,
#orderForm textarea:focus:placeholder-shown {
	color: #959595;
}
#orderForm input[type='text']:focus::-webkit-input-placeholder,
#orderForm input[type='email']:focus::-webkit-input-placeholder,
#orderForm textarea:focus::-webkit-input-placeholder {
	color: #959595;
}

#orderForm input#submitBtn {
	max-width: 200px;
	margin-top: 30px;
    padding: 10px 0;
	color: #000;
	box-sizing: border-box;
	letter-spacing: 0.1em;
	border: 1px solid #ccc;
	transition: 0.3s 0s ease;
}

body.pc #orderForm input#submitBtn:hover {
		color: #fff;
		background: #555;
	}

div.wpcf7-validation-errors {
	border: none !important;
}
div.wpcf7-mail-sent-ok {
	border: none !important;
}
div.wpcf7-response-output {
	margin: 2em 0 0 0 !important;
	padding: 0 !important;
}

#orderForm #estimate {
	height: 0;
	font-size: 0.8em;
	margin-top: 0;
	overflow: hidden;
	transition: all 0.5s 0s ease;
}
#orderForm #estimate.on {
	height: auto;
	margin-top: 100px;
	overflow: auto;
}
#orderForm #estimate input {
	width: 100%;
	padding: 10px 10px;
	text-align: right;
	pointer-events: none;
	background: none;
}
#orderForm span {
    display: inline;
}
#orderForm span.wpcf7-list-item {
	display: inline;
	margin: 0;
}
#orderForm div.wpcf7-response-output {
}


.wpcf7 form .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	border: none !important;
}
.wpcf7-not-valid-tip {
	color: #774323 !important;
}

main .conts#faq .areaAccordion:first-of-type {
    border-top: 1px solid #ccc;
}

main .conts#product .contsBlockA {
    margin-top: 50px;
    margin-bottom: 50px;
}

@media only screen and (max-width:1000px) {
    main .conts .thumbBox .mainlArea .detailBox dl {
        font-size: 12px;
        padding: 15px 0 0 15px;
    }
}

@media only screen and (max-width:900px) {
    main .conts .thumbBox .mainlArea .detailBox dl {
        font-size: 11px;
        padding: 10px 0 0 10px;
    }
}

@media only screen and (max-width: 800px) {
    main .conts .thumbBox:nth-of-type(3n)::after,
    main .conts#equipment .thumbBox:nth-of-type(13)::after {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    main .contsBlockA.textPhoto {
        display: block;
    }
    main .contsBlockA.textPhoto .textArea {
        width: 100%;
    }
    main .contsBlockA.textPhoto .photoArea {
        width: 100%;
        margin-top: 20px;
    }
}

/* ↑ body.top ↑ */


/* ↓ shaft list ↓ */

main .conts .thumbWrapShaft {
    padding-bottom: 100px;
    border-top: 1px solid #ccc;
}

main .conts .thumbWrapShaft:last-of-type {
    border-bottom: 1px solid #ccc;
}

main .conts .thumbWrapShaft .headBox {
    position: relative;
    margin-top: 30px;
    /* margin-bottom: 30px; */
}

main .conts .thumbWrapShaft .headBox h3 {
    font-size: 22px;
    line-height: 1.6;
}

main .conts .thumbWrapShaft .headBox p.setumei {
    margin-top: 40px;
    /* font-size: 14px; */
}

main .conts .thumbWrapShaft .frexWrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

main .conts .thumbWrapShaft .thumbBox {
    width: calc(100% / 3 - 2px);
    margin-top: 40px;
}

main .conts .thumbWrapShaft .thumbBox.null {
    margin: 0;
}

main .conts .thumbWrapShaft .thumbBox .mainlArea {
    position: relative;
    transition: all 0.4s 0s ease;style.css
}

main .conts .thumbWrapShaft .thumbBox .mainlArea a {
    display: block;
}

main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox {
    width: calc(100% - 20px);
    color: #000;
}

body.pc main .conts .thumbWrapShaft .thumbBox .mainlArea:hover {
    opacity: 0.5;
}

main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 12px;
    line-height: 1.3;
    padding: 18px 0 0 0;
}

main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dt {
    width: 4.5em;
    margin-bottom: 10px;
}

main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dd {
    width: calc(100% - 5em);
    margin-bottom: 10px;
    word-break: break-word;
}

.shaftSup.contsBlockA dl.sup {
    font-size: 13px;
    margin-bottom: 20px;
}

.shaftSup.contsBlockA dl.sup dt {
    width: 11em;
    margin-bottom: 0px;
    padding-right: 0px;
}

.shaftSup.contsBlockA dl.sup dd {
    width: calc(100% - 11em);
}

@media only screen and (max-width: 1100px) {
    main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dl {
        font-size: 11px;
    }
}

@media only screen and (max-width: 800px) {
    .shaftSup.contsBlockA {
        padding-top: 40px;
    }
    .shaftSup.contsBlockA dl.sup {
        display: block;
        margin-top: 0;
        margin-bottom: 30px;
        line-height: 1.8;
    }
    .shaftSup.contsBlockA dl.sup dt {
        width: 100%;
        margin-top: 0;
        margin-bottom: 3px;
        padding-right: 0;
    }
    .shaftSup.contsBlockA dl.sup dd {
        width: 100%;
        margin-top: 0;
    }
}

@media only screen and (max-width: 600px) {
    main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dl {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 1em);
        font-size: 12px;
        line-height: 1.3;
        padding: 18px 0 0 0;
    }

    main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dt {
        width: 100%;
        margin-bottom: 2px;
    }

    main .conts .thumbWrapShaft .thumbBox .mainlArea .detailBox dd {
        width: 100%;
        margin-bottom: 12px;
    }
}

/* ↑ shaft list ↑ */


/* ↓ body.shaft ↓ */

.shaft .mainArea {
    position: relative;
    margin-top: 70px;
    margin-bottom: 100px;
}

.shaft .mainArea h3 {
    font-size: 24px;
    margin-bottom: 30px;
}

.shaft .mainArea h3.shaftSingle {
    font-size: 22px;
}

.shaft .mainArea p {
    margin-bottom: 15px;
}

.shaft main dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.shaft main dt {
    width: 4.5em;
    margin-bottom: 7px;
}

.shaft main dd {
    width: calc(100% - 4.5em);
    margin-bottom: 7px;
}

.shaft .mainArea .rinkBox {
    margin-top: 30px;
}

.shaft main .conts .photoWrap {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* ↑ body.shaft ↑ */


/* ↓ semiorder ↓ */

main .conts h3.contsBlockHead {
    font-size: 22px;
    line-height: 1.6;
}

main .conts p.setumei {
    margin-top: 40px;
}

main .conts#semiorder .sup {
    font-size: 12px;
}

main .conts#semiorder .blueprint {
    margin-top: 30px;
    margin-bottom: 30px;
}

main .conts#semiorder table.reference {
    margin-top: 20px;
    font-size: 12px;
}

main .conts#semiorder table.reference tr {
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

main .conts#semiorder table.reference th {
    font-weight: normal;
}

main .conts#semiorder table.reference th {
    padding: 6px 10px;
    text-align: center;
}

main .conts#semiorder table.reference td {
    padding: 6px 10px;
    text-align: right;
}

main .conts#semiorder table.reference th:first-child,
main .conts#semiorder table.reference td:first-child{
    padding-left: 0px;
}

main .conts#semiorder table.reference th:last-child,
main .conts#semiorder table.reference td:last-child{
    padding-right: 0px;
}

main .conts#semiorder .order {
    margin-top: 50px;
}

main .conts#semiorder .order a {
	width: 200px;
    padding: 8px 0;
    font-size: 15px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.1em;
    background: #555;
	box-sizing: border-box;
	border: 1px solid #ccc;
	transition: 0.3s 0s ease;
}

main .conts#semiorder .order a:hover {
    color: #000;
    background: none;
}

main .conts#semiorder .order a::after {
    display: none;
}

main .conts#semiorder table.reference td.taLeft {
    text-align: left;
}

main .conts#semiorder .nowrap {
    white-space: nowrap;
}

/* ↑ semiorder ↑ */


/* ↓ equipment list ↓ */

main .conts .thumbWrapEquipment {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*margin-top: -50px;*/
    border-top: 1px solid #ccc;
}

main .conts .thumbWrapEquipment .thumbBox {
    width: calc(100% / 3 - 2px);
    margin-top: 30px;
}

main .conts .thumbWrapEquipment .thumbBox .headArea {
    height: 80px;
}

main .conts .thumbWrapEquipment .thumbBox .headArea h3 {
    font-size: 18px;
    line-height: 1.6;
}

main .conts .thumbWrapEquipment .thumbBox .mainlArea {
    position: relative;
}

main .conts .thumbWrapEquipment .thumbBox .mainlArea .detailBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(237,237,234,0.9);
    opacity: 0;
    transition: all 0.5s 0s ease;
}

body.pc main .conts .thumbWrapEquipment .thumbBox .mainlArea:hover .detailBox {
    opacity: 1;
}

main .conts .thumbWrapEquipment .thumbBox .mainlArea .detailBox dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 12px;
    line-height: 1.3;
    padding: 20px 0 0 20px;
}

main .conts .thumbWrapEquipment .thumbBox .mainlArea .detailBox dt {
    width: 4.5em;
    margin-bottom: 10px;
}

main .conts .thumbWrapEquipment .thumbBox .mainlArea .detailBox dd {
    width: calc(100% - 4.5em);
    margin-bottom: 10px;
    word-break: break-word;
}

main .conts .thumbWrapEquipment .thumbBox:nth-of-type(3n) {
    padding-bottom: 70px;
}

main .conts .thumbWrapEquipment .thumbBox:nth-of-type(3n):after,
main .conts .thumbWrapEquipment .thumbBox:nth-of-type(13):after {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: calc( 80vw - 150px );
    height: 1px;
    margin-top: 70px;
    background: #ccc;
}

main .conts#equipment .list {
    margin-top: 30px;
}

main .conts#equipment .list .inlineBlock {
    display: inline-block;
    margin-right: 3em;
}

@media only screen and (max-width: 1100px) {
    main .conts .thumbWrapEquipment .thumbBox .mainlArea .detailBox dl {
        font-size: 11px;
    }
}

@media only screen and (max-width: 1100px) {
    main .conts .thumbWrapEquipment .thumbBox:nth-of-type(3n):after,
    main .conts .thumbWrapEquipment .thumbBox:nth-of-type(13):after {
        width: 100%;
    }
}

/* ↑ equipment list ↑ */


/* ↓ body.equipment ↓ */

.equipment .mainArea {
    position: relative;
    margin-top: 70px;
    margin-bottom: 100px;
}

.equipment .mainArea h3 {
    font-size: 22px;
    margin-bottom: 30px;
}

.equipment .mainArea p {
    margin-bottom: 15px;
}

.equipment .mainArea p.spec {
    margin-top: 40px;
}

.equipment main dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    line-height: 1.5;
}

.equipment main dt {
    width: 4.5em;
    margin-bottom: 7px;
}

.equipment main dd {
    width: calc(100% - 4.5em);
    margin-bottom: 7px;
}

.equipment .mainArea .rinkBox {
    margin-top: 30px;
}

.equipment main .conts .photoWrap {
    margin-top: 40px;
    margin-bottom: 40px;
}

.equipment main video {
    width: 100%;
    margin-top: 20px;
}

.movieBox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 20px;
}

.movieBox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.movieBox .movieVal {
    position: absolute;
    bottom: 5px;
    left: 12px;
    width: 40px;
    height: 40px;
    background: url(common/img/icon_movie_volume.svg) right top no-repeat;
    opacity: 0.5;
    transition: 0.4s ease 0s;
    transition-property: opacity;
}

.movieBox .movieVal.active {
    background: url(common/img/icon_movie_volume.svg) left top no-repeat;
}

.pc .movieBox .movieVal:hover {
    opacity: 1;
}

/* ↑ body.equipment ↑ */


/* ↓ body.news ↓ */

.news .mainArea {
    position: relative;
    margin-top: 100px;
    margin-bottom: 150px;
}

.news .mainArea h3 {
    font-size: 24px;
    margin-bottom: 40px;
}

.news .mainArea p {
    margin-bottom: 25px;
}

.news .mainArea p.date {
    margin-bottom: 5px;
}

.news .mainArea .rinkBox {
    margin-top: 30px;
}

.news main .conts .photoWrap {
    margin-top: 40px;
}

/* ↑ body.news ↑ */


/* ↓ body.recruit ↓ */

.recruit .mainArea {
    position: relative;
    margin-top: 100px;
    margin-bottom: 150px;
}

.recruit .mainArea h3 {
    font-size: 24px;
    margin-bottom: 40px;
}

.recruit .mainArea p {
    margin-bottom: 15px;
}

.recruit main .conts#recruit .contsBlockA:first-of-type {
    padding-top: 30px;
    border-top: 1px solid #ccc;
}

.recruit main .contsBlockA dl {
}

.recruit main .contsBlockA dt {
    width: 8em;
}

.recruit main .contsBlockA dd {
    width: calc(100% - 8em);
}

.recruit main .contsBlockA .note {
    margin-bottom: 7px;
}

.recruit main .contsBlockA .ib {
    display: inline-block;
}

.recruit main .conts .photoWrap {
    margin-top: 150px;
}

.recruit ul.listA li {
    position: relative;
    padding-left: 1em;
}

.recruit ul.listA li:before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}

main .conts#topBanner.recruit {
    margin-top: 150px;
    padding-top: 0;
}

#topBanner.recruit .bannerArea h2 {
    width: 360px;
    height: 100px;
}

#topBanner.recruit .bannerArea.shaft h2 {
    background: url(common/img/recruit_banner_hibikore_h2.svg) 0 0 no-repeat;
}

#topBanner.recruit .bannerArea a .cover {
    opacity: 0;
}

#topBanner.recruit .bannerArea a:hover .cover {
    opacity: 0.6;
}

#topBanner.recruit p {
    margin-top: 20px;
}

.recruit .mainArea .rinkBox.entry {
    margin-top: 30px;
    font-size: 16px;
}

.recruit .mainArea .rinkBox.entry a {
    padding: 10px 50px 10px 30px;
}

.recruit .mainArea .rinkBox.entry a::after {
    top: 11px;
}

main .conts#recruitEntry .contsBlockA:first-of-type {
    border-top: none;
}

main .conts#recruitEntry .contsBlockA dt {
    width: 10em;
}

main .conts#recruitEntry .contsBlockA dd {
    width: calc(100% - 10em);
}



/* ↑ body.recruit ↑ */


/* ↓ body.history ↓ */

.history .archiveArea {
    position: relative;
    margin-top: 100px;
    margin-bottom: 150px;
}

main .conts#history .contsBlockA dt {
    width: 8em;
}

main .conts#history .contsBlockA dd {
    width: calc(100% - 8em);
}

/* ↓ body.history ↓ */


/* ↓ body.process ↓ */

.process .mainArea {
    position: relative;
    margin-top: 100px;
    margin-bottom: 150px;
}

.process main .conts .readArea {
    margin-bottom: 0;
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}

.process main .contsBlockA h3 {
    font-size: 22px;
    margin-bottom: 20px;
}

.process main .contsBlockA dt {
    width: 50%;
    padding-right: 40px;
}

.process main .contsBlockA dd {
    width: 50%;
}

.process main .contsBlockA img {
    vertical-align: text-top;
}

.process main p.link1 {
    margin-top: 20px;
}

@media only screen and (max-width: 800px) {
    .process main .contsBlockA dl {
        display: block;
        padding-bottom: 40px;
    }
    .process main .contsBlockA dt {
        width: 100%;
        padding-right: 0;
        margin-top: 20px;
    }
    .process main .contsBlockA dd {
        width: 100%;
        margin-top: 20px;
    }
    .process main .contsBlockA dl.sup {
        margin-bottom: 30px;
        padding-bottom: 0px;
    }
    .process main .contsBlockA dl.sup dt {
        width: 100%;
        padding-right: 0;
        font-size: 15px;
    }
    .process main .contsBlockA dl.sup dd {
        width: 100%;
        margin-top: 0;
    }
}

/* ↑ body.process ↑ */




/* ↓ body.faq ↓ */

main #faq.conts h2 {
    margin-bottom: 70px;
}

/* ↑ body.faq ↑ */




/* --------------------------------------------------------------
    6: footer
-------------------------------------------------------------- */

footer {
    width: calc( 85vw - 150px );
    margin: 200px 0 0 auto;
	padding: 0 5vw 36px 0;
}

footer a:link {
    color: #000;
    text-decoration: none;
}

footer a:visited {
    color: #000;
}

.pc footer a:hover {
    color: #8a8a8a;
    text-decoration: none;
}

footer a:active {
    color: #000;
}

footer #footContact p.read {
    height: 73px;
    margin-bottom: 30px;
    text-indent: -9999px;
    background: url(common/img/foot_contact_copy_l.svg) no-repeat;
}

footer #footContact p.number {
    font-size: 22px;
}

footer #footContact a.boxLink {
    margin-top: 30px;
}

footer #copy {
    margin-top: 150px;
    font-size: 10px;
    text-align: right;
}

@media only screen and (max-width: 800px) {
	footer {
		width: 100vw;
        margin: 200px 0 0 auto;
        padding: 0px 5vw 36px 5vw;
	}
    footer p#copy {
        text-align: left;
    }
}

@media only screen and (max-width: 620px) {
    footer #footContact p.read {
        height: 118px;
        background: url(common/img/foot_contact_copy_s.svg) no-repeat;
    }
}

/*reCAPTCHAマーク消去*/
.grecaptcha-badge { visibility: hidden; }