@charset "utf-8";


/*
=========================================
    Base Layout
=========================================
*/

/*container*/

h1 {
    text-align: center;
    margin-top: 12rem;
    margin-bottom: -1rem;
    font-size: 4.2rem;
    font-family: kan412typos-std,sans-serif;
    font-weight: 400;
    font-style: normal;
}


/*
=========================================
    Modules（Block）
=========================================
*/

/*section
--------------------*/
.headeing-design {
    position: absolute;
    top: 450px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	margin-top: 14rem;
}
.skill-skill-container {
    margin-top: 50px;
    margin-bottom: 120px;
}
.section-skill {
	margin-top: 20rem;
}

.work-section {
	margin-bottom: 5rem;
}

/*contact お問合せ
--------------------*/
.contact h2 {
    margin-top: 80px;
}


/* 囲みのレイアウト1 */
.mybox{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'ECサイトデザイン';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト2 */
.mybox2{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox2:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: '紙ものデザイン';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox2:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト3 */
.mybox3{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox3:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'グッズデザイン';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox3:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト4 */
.mybox4{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox4:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'LP/Webサイトデザイン';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox4:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト5 */
.mybox5{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox5:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'ECサイトの更新/修正';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox5:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト6 */
.mybox6{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox6:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: '新規LPの制作';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox6:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */


/* 囲みのレイアウト7 */
.mybox7{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox7:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'ECサイト関連業務';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox7:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト8 */
.mybox8{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox8:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: '対面接客/販売';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox8:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト9 */
.mybox9{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox9:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'ライティング';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox9:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */

/* 囲みのレイアウト10 */
.mybox10{
	border: 1px solid #162442;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	padding: 54px 10px 10px 10px;	/* 内側の余白 上・右・左・下 */
	position: relative;
	z-index: 0;
    text-align: left;
}
.mybox10:before{
	background: linear-gradient(#474c88, #162442);	/* タイトル部分背景色 */
	border-radius: 5px 5px 0px 0px;
	color: #fff;	/* タイトル部分文字色 */
	content: 'その他経験/資格など';
	height: 38px;	/* タイトル部分高さ */
	padding: 5px 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.mybox10:after {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #162442 transparent transparent transparent;	/* 吹き出し三角部分の色 */
	content: "";
	position: absolute;
	top: 35px;
	left: 10px;
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* /囲みのレイアウト */


.contact-bgc {
    background-color: #fefee3;
}
.contact-arrow {
    margin-top:40px;
    margin-bottom: -50px;
}

.footer-container {
    max-width: 960px;
    margin: 0 auto;
    margin-top: 0;
    display: flex;
    justify-content: center;
}

/* 送信ボタン */
/*その他と主な共通部分は省略*/
input[type="submit"] {
    border: none;
    background: #c9d3c9;
    background: -webkit-gradient(linear, left top, left bottom, from(#F9F871), to(#81D87E));
    background: -webkit-linear-gradient(top, #F9F871 0%, #81D87E 100%);
    background: linear-gradient(to bottom, #F9F871 0%, #81D87E 100%);
    padding: 1rem 8rem 1rem 8rem;
    -webkit-box-shadow:
    0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow:
    0 5px 5px rgba(0, 0, 0, 0.2);
    font-size: 1.6rem;
    letter-spacing: 1.6rem;
    margin-bottom: 7rem;
}
input[type="submit"]:hover {
    background: -webkit-gradient(linear, left bottom, left top, from(#F9F871), to(#81D87E));
    background: -webkit-linear-gradient(bottom, #F9F871 0%, #81D87E 100%);
    background: linear-gradient(to top, #F9F871 0%, #81D87E 100%);
    transition: all .3s;
    color: #81D87E;
    /* hoverした時ポインターを手のひらに */
    cursor: pointer;
}

/* /送信ボタン */

@media screen and (min-width: 768px) {
    .arrow {
        margin-bottom: 100px;
    }
    .contact-bgc {
        background-color: #fefee3;
        max-width: 100%;
        height: auto;
        background-size: cover;
    }
    .contact-arrow {
        margin-top:40px;
        margin-bottom: -50px;
        text-align: center;
    }
}