@charset "UTF-8";
html,body{
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
  }

body {
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
background-color: #F3F1EF;
}

main {
    display: block;
    flex: 1 0 auto;
  }

img {
width: 100%;
height: auto;
}

a {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
opacity: 1;
text-decoration: none;
color: #111;
}

a:hover {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
opacity: 0.8;
text-decoration: none;
color: #111;
}

h1{
    opacity: 0;
}

.w1200,.w960,.w750,.w640,.w500,.w400{
max-width: 90%;
margin-left: auto;
margin-right: auto;
}

.w1200{
width: 1200px;
}

.w960{
width: 960px;
}

.w750{
width: 750px;
}

.w640{
width: 640px;
}

.w500{
width: 500px;
}

.w400{
width: 400px;
}

/* ヘッダーのメニュー */
.header-nav__menu{
display: flex;
align-items: center;
list-style: none;
padding-left: 0;
}

.header-nav__menu li{
margin-right: 40px;
font-size: 28px;
}

.header-nav__menu li:last-of-type{
margin-right: 30px;
}

.header-nav__contact-btn{
height: 100%;
}

.header-nav__contact-btn a{
display: flex;
width: 220px;
height: 100%;
justify-content: center;
align-items: center;
color: #fff;
background-color: #222;
}

/* ハンバーガーメニューここから */

.hamburger {
position: relative; /*ボタン内側の基点となるためrelativeを指定*/
cursor: pointer;
width: 90px;
height: 90px;
z-index: 100;
display: none;
}

/*ボタン内側*/
.hamburger span {
display: inline-block;
transition: all 0.4s; /*アニメーションの設定*/
position: absolute;
left: 14px;
height: 2px;
background: #222;
}

.hamburger span:nth-of-type(1) {
top: 27px;
width: 45%;
}

.hamburger span:nth-of-type(2) {
top: 41.4px;
width: 35%;
}

.hamburger span:nth-of-type(3) {
top: 55.8px;
width: 20%;
}

/*activeクラスが付与されると線が回転して×になる*/

.hamburger.active span:nth-of-type(1) {
top: 35px;
left: 8px;
transform: translateY(6px) rotate(-135deg);
width: 54%;
}

.hamburger.active span:nth-of-type(2) {
opacity: 0;
}

.hamburger.active span:nth-of-type(3) {
top: 48px;
left: 8px;
transform: translateY(-6px) rotate(135deg);
width: 54%;
}

/* ハンバーガーメニューここまで */

.header-nav {
width: 100%;
height: 90px;
display: flex;
justify-content: space-between;
align-items: center;
}

.header-nav__left {
margin-left: 30px;
display: flex;
align-items: center;
}

.header-nav__right {
width: 450px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}

.logo {
width: 70px;
display: block;
}

.logo img {
width: 100%;
height: auto;
}

.logo-txt {
margin-left: 15px;
padding-left: 15px;
border-left: 1px solid #d9d9d9;
}

nav.globalMenuSp {
position: fixed;
z-index: 2;
top: 0;
left: 0;
color: #000;
background: #fff;
text-align: center;
transform: translateX(100%);
transition: all 0.6s;
width: 100%;
height: 100%;
}

nav.globalMenuSp ul {
margin: 100px auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}
/* nav.globalMenuSp ul li:hover {
background: #ddd;
} */

nav.globalMenuSp ul li a {
display: block;
color: #000;
padding: 1em 0;
font-size: 22px;
text-decoration: none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
transform: translateX(0%);
}

.headroom {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all 0.2s linear;
z-index: 10;
}

/* .headroom--unpinned .header-nav {
height: 50px;
transition: all 0.2s linear;
} */
/* .headroom--unpinned .logo{
width: 80px;
} */
/* .headroom--pinned .header-nav {
height: 100px;
transition: all 0.2s linear;
} */

/* .header-nav-height .header-nav {
height: 100px !important;
} */

/* フッタースペース */
.footer-copy{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #111;
}


/* top */

.top{
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.top__box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top__box--title{
    font-size: 80px;
    text-align: center;
    margin: 20px 0;
}

.top__box--title-small {
    font-size: 40px;
    text-align: center;
    color: gray;
    margin: 10px 0 20px;
}

.top__box--img{
    width: 180px;
}

/* works */

.base__title{
    text-align: center;
    font-size: 50px;
    margin-bottom: 60px;
}

.works__box{
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    display: block;
}

.works__box--img{
    width: 100%;
}

.works__box--title{
    font-size: 40px;
    transform: translate(-40px);
    text-align: center;
    margin-top: 30px;
}

.works__box--title::before{
    content: "";
    display: inline-block;
    width: 85px;
    height: 70px;
    background-image: url(../img/link_hand.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(10px,10px);
}

.works__box--txt{
    font-weight: bold;
    text-align: center;
    font-size: 22px;
    margin-bottom: 150px;
}

.about__img{
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.about__name{
    font-size: 35px;
    text-align: center;
    margin: 20px auto 40px;
}

.about__txt{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.about__tool-lang-box{
    border: 5px solid #161616;
    border-radius: 25px;
    padding: 60px;
    margin: 50px auto;
    width: 700px;
    max-width: 100%;
}

.about__tool-lang-box--title{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-bottom: 30px;
}

.about__tool-lang-box p{
    font-size: 24px;
}

/* contact */

.contact{
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.contact p{
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.contact__box dt{
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    color: #666;
}

.require{
    background: #E62929;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 15px;
    vertical-align: bottom;
    margin-left: 10px;
}

.contact__box dd input,
.contact__box dd textarea{
    width: 100%;
    border: 2px solid #161616;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px;
    background: #fff;
}

.contact__box dd{
    margin-top: 20px;
    overflow-wrap: break-word;
    font-weight: bold;
    font-size: 20px;
}

.contact__box dd textarea{
    height: 150px;
    resize: none;
}

input[name="submitConfirm"],
input[name="mwform_submitButton-11"]{
    display: block;
    width: 300px;
    height: 80px;
    color: #fff;
    background: #161616;
    border-radius: 20px;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    font-size: 22px;
}

input[name="submitBack"]{
    display: block;
    text-align: center;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-decoration: underline;
}

.mw_wp_form.mw_wp_form_complete p{
    line-height: 2;
}

/* スクロールしたら出て来る */
.scroll_bottom_show{
opacity: 0;
transition-duration: 1500ms;
transition-property: opacity, transform;
transform: translate(0, 50px);
transition-timing-function:ease;
}

.scroll_bottom_show_2{
opacity: 0;
transition-duration: 1200ms;
transition-property: opacity, transform;
transform: translate(0, 50px);
transition-timing-function:easeOutQuint;
}

.scroll_fade_sllow_show{
opacity: 0;
transition-duration: 1500ms;
transition-property: opacity, transform;
transition-delay :200ms;
transition-timing-function:ease;
}

.scroll_fade_show{
opacity: 0;
transition-duration: 1500ms;
transition-property: opacity, transform;
transition-timing-function:ease;
}

.scroll-in {
opacity: 1;
transform: translate(0, 0);
}

@media screen and (max-width:960px){

.header-nav {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}

.header-nav__left {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.header-nav__right {
width: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}

.header-nav__menu{
display: none;
}

.header-nav__contact-btn{
display: none;
}

.logo {
width: 55px;
}

.logo-txt {
margin-left: 0;
padding-left: 0;
border-left: 0px solid #d9d9d9;
font-size: 10px;
}

/* ハンバーガーメニューここから */

.hamburger {
width: 70px;
height: 70px;
z-index: 100;
display:block;
}

/*ボタン内側*/
.hamburger span {
display: inline-block;
transition: all 0.4s; /*アニメーションの設定*/
position: absolute;
left: 20px;
height: 3px;
background: #222;
}

.hamburger span:nth-of-type(1) {
top: 21px;
width: 45%;
}

.hamburger span:nth-of-type(2) {
top: 32.2px;
width: 45%;
}

.hamburger span:nth-of-type(3) {
top: 43.4px;
width: 45%;
}

/*activeクラスが付与されると線が回転して×になる*/

.hamburger.active span:nth-of-type(1) {
top: 25px;
left: 15px;
transform: translateY(6px) rotate(-135deg);
width: 54%;
}

.hamburger.active span:nth-of-type(2) {
opacity: 0;
}

.hamburger.active span:nth-of-type(3) {
top: 38px;
left: 15px;
transform: translateY(-6px) rotate(135deg);
width: 54%;
}

/* ハンバーガーメニューここまで */

/* .headroom--unpinned .header-nav {
height: 70px;
transition: all 0.2s linear;
}
.headroom--pinned .header-nav {
height: 70px;
transition: all 0.2s linear;
}

.header-nav-height .header-nav {
height: 70px !important;
} */

.footer {
padding: 80px 0 60px;
}
}

@media screen and (max-width:640px){
    .top__box--title {
        font-size: 55px;
    }

    .top__box--title-small {
        font-size: 30px;
    }

    .base__title {
        font-size: 40px;
    }

    .works__box--title {
        font-size: 24px;
        margin-top: 20px;
    }

    .works__box--txt {
        font-size: 18px;
        margin-bottom: 80px;
    }

    .works__box--title::before {
        width: 65px;
        height: 55px;
    }

    .about__img {
        width: 250px;
    }

    .about__name {
        font-size: 30px;
    }

    .about__txt {
        font-size: 16px;
    }

    .about__tool-lang-box {
        padding: 30px;
    }

    .about__tool-lang-box--title {
        font-size: 23px;
    }

    .about__tool-lang-box p {
        font-size: 18px;
        line-height: 1.7;
    }

    .contact__box dt {
        font-size: 18px;
    }

    .contact p {
        font-size: 18px;
        text-align: left;
    }

    .footer-copy {
        font-size: 10px;
    }
}