body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/**
 * reset
 */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, /*sup, */tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 outline: 0;
	 font-size: 14px;
	 font-weight: normal;
	 font-style: normal;
	 vertical-align: baseline;
	 background: transparent;
}

sup {
	vertical-align: top;
    font-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	background: transparent;
}

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

a {
	text-decoration: none;
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

ul, ol, li {
	list-style: none;
}

/* 購入後お問合せ用ヘッダーのスタイル */

    /* ヘッダー */
    .headertop {
        background-image: url('/product/knit/sds_knitpaint-online/img/inquiry_image_j.jpg');
        background-size: cover;
        background-position: center;
        height: 500px;
        position: relative;
    }
    .header_bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 70%;
        height: 500px;
        background-color: #0094bd;
        transform: skewX(30deg);
        transform-origin: bottom left;
        opacity: 0.5;
        z-index: 1;
    }
    .header-inner {
        margin-left: 20px;
        margin-right: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        vertical-align: baseline;
        position: relative;
        z-index: 2;
    }
    .header-logo img {
        margin-top: 20px;
        width: 200px;
        filter: drop-shadow(0px 0px 5px rgba(0, 148, 189, 4.5));
    }
    .header-menu {
        display: flex;
        margin-top: 26px;
    }
    .header-menu-list {
        margin-left: 45px;
    }
    .header-menu-list a {
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0px 0px 5px rgba(0, 148, 189, 0.5), 
                     0px 0px 5px rgba(0, 148, 189, 0.5), 
                     0px 0px 5px rgba(0, 148, 189, 0.5);
    }
    .language_box {
        top: 20px;
        right: 19px;
        width: 80px;
        height: auto;
        text-align: center;
        position: absolute; /* 絶対位置指定 */
    }
    .language-title {
        background-color: #0098A8; /* 緑色の背景 */
        color: white; /* 白い文字 */
        padding: 10px; /* 内側の余白 */
        cursor: pointer; /* マウスカーソルをポインタに変更 */
    }
    .language-down {
        display: none;  /* 初期状態では非表示 */
        position: absolute; /* 絶対位置で配置 */
        top: 100%; /* 親要素の下に配置 */
        width: 80px;
        background-color: #ffffff; /* 背景を白に設定 */
        box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* 少し影をつける */
    }
    .language_box:hover .language-down {
        display: block; /* 親要素全体がホバーされたら表示する */
    }
    .language {
        padding: 10px; /* 内側の余白 */
        color: #0098A8; /* 緑色の文字 */
        text-decoration: none; /* 下線なし */
    }
    .language:hover {
        background-color: #E6F4F8; /* ホバー時に背景色を変更 */
    }
    .catch_copy {
        position: absolute;
        top: 240px;
        left: 5%;
        margin: 20px auto 10px auto;
        z-index: 3;
    }
    .catch_copy p {
        font-size: 60px;
        font-weight: 700;
        line-height: 90px;
        color: #ffffff;
        text-shadow: 0px 0px 8px #0094bd, 0px 0px 8px #0094bd, 0px 0px 8px #0094bd;
    }
    
    /* 768px以下のスタイル */
    @media screen and (max-width: 768px) {
        .headertop {
            display: none;
        }
        .responsive-header {
            display: block;
            width: 100%;
            z-index: 10;
        }
        .responsive-header .responsive-back {
            background-color: #ffffff;
            height: 70px;
            width: 100%;
            box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* ドロップシャドウ追加 */
            position: relative;
            z-index: 3;
        }
        .responsive-header .logo {
            position: absolute;
            max-width: 230px; /* 最大幅150ピクセル */
            height: auto; /* 高さは自動調整 */
            margin: 27px 27px;
            z-index: 4;
        }
        .responsive-header .background-image {
            height: 200px;
            background-image: url('/product/knit/sds_knitpaint-online/img/inquiry_image_j.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0.9;
            position: relative;
        }
        .responsive-header .catch_copy {
            position: absolute;
            top: 150px;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            width: 100%;
            text-align: center;
            font-size: 40px;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0px 0px 3px #0094bd, 0px 0px 5px #0094bd, 0px 0px 5px #0094bd;
            /* bottom: 0; */
        }
    }
    
    /* 769px以上のスタイル */
    @media screen and (min-width: 769px) {
        .responsive-header {
            display: none;
        }
    }
    
    /* 400px以下のスタイル */
    @media screen and (max-width: 400px) {
        .responsive-header .catch_copy {
            font-size: 30px;
        }
        .responsive-header .logo {
            max-width: 180px; /* 最大幅150ピクセル */
        }
    }    

/* 購入後お問合せ用フォームのスタイル */
main {
    padding: 0 20px;
    margin: 85px auto;
    max-width: 800px;
}


/* ハンバーガー用スタイル */
#sdsknit_header {
    position: relative;
}

#sdsknit_header .site-logo {
	padding: 5px;
}

#sdsknit_header .gnav {
    position: absolute;
    left: 180px;
}

#sdsknit_header .site-header{
background: #fff;
display: flex;
justify-content: space-between;
padding: 20px;
position: absolute;
width: 100%;
}

#sdsknit_header nav.gnav {
width: 100%;
background-color: #0094bd;
}

#sdsknit_header li {
float: left;
width: 100%;
}	

#sdsknit_header .circle {
width: 25px;
height: 25px;
background: rgb(255, 255, 255);
border-radius: 50%;
color: #ffffff;
box-shadow: 4px -4px 0px 9px rgba(0, 148, 189) inset;
text-shadow: 0px 0px 15px #0094bd, 0px 0px 15px #0094bd, 0px 0px 15px #0094bd;
margin-top: 14px;
border: 1px solid rgba(255, 255, 255);
}	

#sdsknit_header .logo_area {
    border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 10px;

}	
    
#sdsknit_header .site-logo img {
	width: 200x;
  padding-top: 10px;
}

.site-logo a {
  color: #ffffff;
  font-size: 17px;
}

#sdsknit_header .contents {
margin-top: 5px;
}

#sdsknit_header .contents span {
margin-left: 5%;
font-size: 15px;
letter-spacing: 2px;
color: #ffffff;
}

/*============
nav
=============*/
nav {
display: block;
position: fixed;
top: 0;
right: -300px;
bottom: 0;
width: 300px;
background: #0098A8;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: .5s;
z-index: 1010;
}
.open nav {
right: 0;
}
nav .inner {
padding: 25px;
}
nav .inner ul {
list-style: none;
margin: 0;
padding: 0;
}
nav .inner > ul > li {
position: relative;
margin: 0;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
nav .inner ul li a {
display: block;
color: #ffffff;
font-size: 14px;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
}


@media screen and (max-width: 767px) {
nav {
right: -240px;
width: 240px;
}
}
/*============
@keyframes
=============*/
@keyframes equalizer01 {
0% {
width: 70%;
}
10% {
width: 50%;
}
20% {
width: 100%;
}
30% {
width: 90%;
}
40% {
width: 50%;
}
50% {
width: 70%;
}
60% {
width: 50%;
}
70% {
width: 90%;
}
80% {
width: 100%;
}
90% {
width: 90%;
}
100% {
width: 70%;
}
}
@keyframes equalizer02 {
0% {
width: 70%;
}
10% {
width: 80%;
}
20% {
width: 60%;
}
30% {
width: 90%;
}
40% {
width: 80%;
}
50% {
width: 70%;
}
60% {
width: 80%;
}
70% {
width: 90%;
}
80% {
width: 60%;
}
90% {
width: 90%;
}
100% {
width: 70%;
}
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
position: fixed;
top: 15px;
right: 20px;
width: 60px;
height: 30px;
transform: translate(0, 0);
transition: all .5s;
cursor: pointer;
z-index: 4;
}
.open .toggle_btn {
right: 330px;
}
.toggle_btn span {
display: block;
position: absolute;
right: 0;
width: 30px;
height: 7px;
background-color: #0098A8;
transition: all .5s;
border-radius: 5px;
border: 2px solid #ffffff; 
}
.toggle_btn span:nth-child(1) {
top: 5px;
width: 60px;
animation: equalizer01 7000ms infinite;
}
.toggle_btn span:nth-child(2) {
top: 20px;
width: 30px;
animation: equalizer02 5000ms infinite;
animation-delay: 0.33s;
}
.toggle_btn span:nth-child(3) {
top: 35px;
width: 20px;
animation: equalizer02 5000ms infinite;
}
.open .toggle_btn span {
background-color: #0098A8;
width: 50px;
}
.open .toggle_btn span:nth-child(1) {
transform: translate(0, 20px) rotate(-45deg);
animation: unset;
}
.open .toggle_btn span:nth-child(2) {
opacity: 0;
animation: unset;
}
.open .toggle_btn span:nth-child(3) {
transform: translate(0, -10px) rotate(45deg);
animation: unset;
}
@media screen and (max-width: 767px) {
.open .toggle_btn {
right: 255px;
}
}

/* 言語切り替えボタン */
.language_boxq {
margin-left: 5%;
font-size: 15px;
letter-spacing: 2px;
color: #ffffff;
}
.language-titleq {
padding: 10px; /* 内側の余白 */
cursor: pointer; /* マウスカーソルをポインタに変更 */
}
.language-downq {
display: none;  /* 初期状態では非表示 */

top: 100%; /* 親要素の下に配置 */
}
.language_boxq:hover .language-downq {
display: block; /* 親要素全体がホバーされたら表示する */
}
.languageq {
text-decoration: none; /* 下線なし */
}

/*============
#mask
=============*/
#mask {
display: none;
}
.open #mask {
display: block;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #ffffff;
opacity: .5;
z-index: 3;
cursor: pointer;
transition: all .5s;
}


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

#sdsknit_header .gnav {
    position: absolute;
    left: 0;
}

#sdsknit_header li {
width: 100%;
}	

#sdsknit_header .contents span {
letter-spacing: 2px;
  color: #ffffff;
}

}	
@media screen and (max-width: 768px) {
    .toggle_btn {
        display: block;
    }
    #navArea nav {
        display: block;
    }
}

@media screen and (min-width: 769px) {
    .toggle_btn {
        display: none;
    }
    #navArea nav {
        display: none;
    }
}