@charset "utf-8";
/* CSS Document */

body {
	width:auto;
	margin: 0;
	padding: 0;
	position: relative;
}

.eigyoujikan {
	display:none;
}

.top	{
	height:13vw;
	border-top:2.5vw solid #00a0e9;
	border-bottom:2.5vw solid #00a0e9;
	background-color:#fff799;
	}

.top-in {
	width: auto;
}

.hako-top {
	float:none;
	margin:auto 3vw;
	}

.hako-top img {
	display: none;
	}
	
.shamei1 {
	font-size:3.8vw;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:500;
	margin:0 0.2vw;
	padding:0;
	}
	
.shamei2 {
	font-size:5.3vw;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:800;
	margin:0 0.2vw;
	padding:0;
	}

.position {
	position: relative;
	z-index: 0;
}

.menu {
	list-style:none;
	width:32vw;
	margin:0 auto;
	}

.blue {
	background: rgba(0,0,0,0);
	height: 0;
	}

#global-navi {
    position: fixed;
    top: 0;
    right: 0px;
    width: 100%;
}

#global-navi li{
	float:right;
	width:100%;
	height:30px;
	font-size:5vw;
	border-spacing:0;
	text-align:right;
	line-height:50px;
	font-weight:600;
	border-bottom:1px solid #FFF;
	list-style: none;
	}

#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding:  8px 20px 8px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
/*スマホ画面で例１のハンバーガーメニューの形にする*/
#wrapper nav {
    position: fixed;
    top: 0;
    width: 60vw;
    height: 100%;
    padding-top: 50px;
    background:linear-gradient(-120deg,rgba(0,0,250,0.8),rgba(50,50,50,0.2));
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2;
	visibility: visible;
	transition: opacity .4s, transition .4s;
}

.visible {
	opacity: 0;
	pointer-events: none;
	display: inline-block;
}

#wrapper nav ul li {
    display:block;
    padding: 4vw 6vw;
	width: 30vw;
}
 
#wrapper nav ul li a {
    text-decoration: none;
    color: #009
}
 
#wrapper .btn-gnavi {
    position: fixed;
    top: 9vw;
    right: 4vw;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor:pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
#wrapper .btn-gnavi span {
    position: absolute;
    width: 35px;
    height: 4px;
    background: #00f;
    border-radius: 10px;
    -webkit-transition: all 500ms;
    transition: all 1000ms
}
 
#wrapper .btn-gnavi span:nth-child(1) {
    top: 0;
}
 
#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px;
}
 
#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px;
}
 
#wrapper .show span:nth-child(1) {
    transform: translateY(10px)rotate(675deg);
	background: #fff;
}
 
#wrapper .show span:nth-child(2) {
    top: 10px;
	opacity: 0;
	transform:rotate(570deg);
	background: #fff;
}
 
#wrapper .show span:nth-child(3) {
	transform: translateY(-11px)rotate(585deg);
	top:21px;
	background: #fff;
}

#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
 
#wrapper .btn-gnavi.open span {
    background: #fff
}
 
#wrapper .btn-gnavi.open span {
    width: 30px;
}
#wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #0f0;
    text-shadow: 0 0 6px #666
}
 
#wrapper .contents section:nth-child(odd) p {
    left: 10%
}
 
#wrapper .contents section:nth-child(even) p {
    right: 10%
}
		
#global-navi .jump {
	color:#FFFffF;
	background: rgba(0,0,0,0);
	}
	
#global-navi .jump:hover {
	color:#fff;
	background:rgba(0,0,0,0);
	border-bottom: 1px solid #fff;
	}
		
.border-right {
	border-right:none;
	}

#wrap	{
	width:auto;
	margin:0 auto;
	}
	
#index0 {
	background-image:url(../image/top-back.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:scroll;
	background-size:cover;
	position:relative;
	height: auto;
	 }

.global-navi {
	margin:20px auto 30px;
	width:auto;
	}
	
.navi1 {
	position:relative;
	}
	
.midashi p {
	position:absolute;
	bottom:50px;
	left:0;
	color:#000;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:4vw;
	width:100%;
	background:rgba(255,255,255,0.9);
	line-height:6vw;
	text-align:center;
	}
	
.midashi h3 {
	display: none;
	}

.hako {
	width:auto;
	height:40vw;
	float:none;
	margin:10vw 0;
}
	
.position {
	position:relative;
	}
	
.irai {
	margin:0 15px 20px;
	font-size:5vw;
	line-height: 6vw;
	border-left:2vw solid #00f;
	border-bottom: none;
	width:70%;
	padding-left:10px;
	}

/*ＤＴＰのボタン*/
.button-dtp {
	border-radius:0;
	display:block;
	width:100%;
	height:30vw;
	position:relative;
	text-decoration:none;
	text-align:center;
	z-index:0;
	float:none;
	margin:auto 0;
	}
 
.button-dtp:before{
	content: none;
	}
 
.button-dtp:after {
	border-radius: 0;
	content:"ＤＴＰ≪印刷物各種≫";
	color: #0ff;
	font-size: 5vw;
	font-weight: 700;
	padding-top:10px; 
	width:100%;
	height:100%;
	position:absolute;
	z-index:-2;
	left:0;
	top:-10px;
	background:linear-gradient(45deg,rgba(159,217,246,0.3),rgba(29,32,136,0.3)), url(../image/dtp.jpg);
	background-size:cover;
	}
 
.button-dtp:hover:before {
	opacity:0;
	}
/*ＤＴＰのボタン*/

/*ＷＥＢのボタン*/
.button-web {
	display:block;
	border-radius:0;
	width:100%;
	height:30vw;
	position:relative;
	text-decoration:none;
	text-align:center;
	color:#F89C41;
	z-index:0;
	float:none;
	margin:auto 0;
	}
 
.button-web:before{
	content:none;
	}
 
.button-web:after {
	content:"ＷＥＢ≪ホームページ作成≫";
	font-size: 5vw;
	font-weight: 700;
	padding-top:10px; 
	border-radius:0;
	width:100%;
	height:100%;
	position:absolute;
	z-index:-2;
	left:0;
	top:-10px;
	background:linear-gradient(45deg,rgba(243,152,0,0.3),rgba(228,0,127,0.3)), url(../image/web.jpg);
	background-size:cover;
	}
 
.button-web:hover:before {
	opacity:0;
	}
/*ＷＥＢのボタン*/

/*ＰＣのボタン*/
.button-pc {
	display:block;
	border-radius:0;
	width:100%;
	height:30vw;
	position:relative;
	text-decoration:none;
	text-align:center;

	z-index:0;
	float:none;
	margin:auto 0;
	}
 
.button-pc:before{
	content: none;
	}
 
.button-pc:after {
	content:"ＰＣ教室";
	color:#0D6803;
	font-weight: 700;
	font-size: 5vw;
	padding-top:10px; 
	border-radius:0;
	width:100%;
	height:100%;
	position:absolute;
	z-index:-2;
	left:0;
	background:linear-gradient(45deg,rgba(218,224,0,0.3),rgba(0,105,52,0.3)), url(../image/pc.jpg);
	background-size:cover;
	}
 
.button-pc:hover:before {
	opacity:0;
	}
/*ＰＣのボタン*/


.main {
	width:auto;
	float: none;
	margin:0 0 15vw;
}

.osirase {
	margin:0.5vw;
	width:auto;
	}

.osirase li {
	font-size:4vw;
	width:auto;
	line-height:25px;
	padding-left:2vw;
	list-style:none;
	margin:4vw 1vw;
	}
	
.infomation {
	margin:1vw auto 6vw;
	}
	
.koukoku {
	width:auto;
	margin:2vw 0;
	}

.inf-waku {
	display:none;
}


.sidebar {
	width:auto;
	float:none;
	margin:50vw 0 0;
	}

.sidebar li {
	list-style: none;
	margin:5px 0;
}

.sidelist-meishi .inner {
	display:none;
}
	
.sidelist-meishi {
	width:auto;
	border-radius:5px;
	margin:0;
	}

.sidelist-meishi li {
	list-style:none;
	border-radius:2px;
	margin:3px auto;
	border:2px solid;
	border-image:linear-gradient(-45deg,#0000ff,#00ffff);
	border-image-slice: 2;
	}
	
.sidelist-meishi img {
	display:block;
	margin:auto 0; 
	}
	
.sidelist-meishi h3 {
	text-align:center;
	border-radius:6px;
	background-color:#00c;
	color:#fff;
	line-height:50px;
	font-size: 28px;
	font-weight: 400;
	}

.sidelist {
	width:auto;
	border-radius:5px;
	margin:0;
	}

.sidelist .inner {
	display:none;
}
	
.sidelist li {
	list-style:none;
	border-radius:2px;
	margin:3px auto;
	border:2px solid;
	border-image: linear-gradient(135deg,#056310,#00ff00);
	border-image-slice: 2;
}
	
.sidelist img {
	display:block;
	margin:auto 0; 
	}
	
.sidelist h3 {
	text-align:center;
	border-radius:7px;
	background-color:#06F;
	color:#fff;
	line-height:50px;
	font-size: 28px;
	font-weight: 400;
	}

.sidelist2 {
	width:auto;
	border-radius:5px;
	margin:10px auto 20px;
	}

.sidelist2 li {
	list-style:none;
	border-radius:2px;
	margin:6px auto;
	text-align:center;
	height: 50px;
	line-height:50px;
	text-decoration: none;
	font-size: 20px;
	}

	
.sidelist2 li a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
}

.sidelist2 li a::after {
	content: none;
}

.sidelist2 li a:hover::after {
	content: none;
}

footer {
	margin-top:7vw;
	background-image:url(../image/footer2.gif);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	}
	
.juusho-waku {
	padding:20px;
	}

.juusho {
	width:auto;
	margin:0 auto;
	}
	
.juusho p {
	font-size:3.1vw;
	font-weight:600;
	color:#333;
	float: none;
	line-height:5vw;
	margin: 0 auto;
	padding:5px 3px;
	background:rgba(255,255,255,0.6);
	}
	
.juusho img {
	display: none;
	}


.copy-right {
	background-color:#00F;
	color:#ddd;
	text-align:center;
	font-size:3vw;
	font-weight:600;
	line-height:5vw;
	}

#index {
	background-image:url(../image/top-back.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:scroll;
	background-size:cover;
	position:relative;
	}

.title1 {
	margin:20px auto;
	}

.title1 h3 {
	margin:2vw 3vw;
	padding:2vw 4vw;
	border-left:8px solid #00F;
	font-size: 4.9vw;
	line-height: 5.3vw;
	}
	
.naiyou {
	font-size:3.7vw;
	line-height:5.3vw;
	width:auto;
	padding:0 3vw;
	margin: 2vw 0;
	text-align:justify;
	}

	
.mokuteki {
	height:30px;
	width:auto;
	line-height:5.3vw;
	position:relative;
	margin:5vw 6vw;
	padding-left:30px;
	font-size:3.9vw;
	}
	
.mokuteki:before {
	content:"";
	background-image:url(../image/logo-mark.gif);
	background-size:contain;
	background-repeat:no-repeat;
	height:5.3vw;
	width:5.3vw;
	display:inline-block;
	position:absolute;
	left:0;
	}

.naiyou img {
	margin:5px;
	}
	
	
.yume {
	height:30px;
	width:auto;
	line-height:5.3vw;
	position:relative;
	margin:5vw 6vw;
	border-bottom:1px #FC0 solid;
	width:40%;
	padding-left:5vw;
	font-size:3.9vw;
	}
	
.yume:before {
	content:"";
	background-image:url(../image/logo-mark.gif);
	background-size:contain;
	background-repeat:no-repeat;
	height:5.3vw;
	width:5.3vw;
	display:inline-block;
	position:absolute;
	left:0;
	}

.gaiyou table {
	width:auto;
	border-spacing:0.5vw 2vw;
	margin-left:0;
	padding: 0 3vw;
	font-size:3.5vw;
	}

.gaiyou table th  {
	width:22vw;
	text-align-last:justify;
	vertical-align:top;
	line-height: 5vw;
	}

.gaiyou table td {
	padding-left:5vw;
	line-height: 5vw;
	}

.enkaku table {
	width:auto;
	border-spacing:0.5vw 4vw;
	margin-left:0;
	padding: 0 3vw;
	font-size:3.5vw;
	}
	
.enkaku table th  {
	width:22vw;
	vertical-align:top;
	text-align: left;
	line-height: 4vw;
	}

.enkaku table td {
	padding-left:5vw;
	line-height: 4vw;
	}

.service-dtp {
	width:auto;
	height:auto;
	margin:10vw 0 30vw;
	}

.service-dtp .left {
	float: none;
}
	
.service-dtp img {
	width:90%;
	max-width: 90%;
	height: auto;
	margin: 0 auto;
	display: block;
	}	

.service-dtp p {
	display:none;
	}

.service-dtp a:hover {
	content: none;
	}

.hako-gyoumu {
	width:100%;
	height:auto;
	margin:10px 0;
	position: relative;
	}

.service-web {
	width:auto;
	height:auto;
	margin:10vw 0 30vw;
	}

.service-web .right {
	float: none;
}
	
.service-web img {
	width:90%;
	max-width:90%;
	height: auto;
	margin: 0 auto;
	display: block;
	}	

.service-web p {
	display:none;
	}
	
.service-web a:hover {
	content: none;
	}
.gyoumuannai-dtp {
	position:absolute;
	background:rgba(0,0,100,0.8);
	top:40%;
	padding:3vw 0;
	width:90%;
	text-align: center;
	font-size:5vw;
	color:#fff;
	}
.gyoumuannai-web {
	position:absolute;
	background:rgba(0,105,52,0.8);
	top:40%;
	padding:3vw 0;
	width:90%;
	left:5%;
	text-align: center;
	font-size:5vw;
	color:#fff;
	}

.service-pc {
	width:auto;
	height:auto;
	margin:10vw 0 30vw;
	}

.service-pc .left {
	float: none;
}
	
.service-pc img {
	width:90%;
	max-width: 90%;
	height:auto;
	margin: 0 auto;
	display: block;
	}	

.service-pc p {
	display:none;
	}
	
.service-pc a:hover {
	content: none;
	}

.gyoumuannai-pc {
	position:absolute;
	background:rgba(235,95,0,0.8);
	top:40%;
	padding:3vw 0;
	width:90%;
	text-align: center;
	font-size:5vw;
	color: #fff;
	}

.setumei {
	margin:0 auto;
	padding:0.3vw 0vw;
	width:auto; 
	float:none;
	}
	
.setumei img {
	display:block;
	margin:3vw auto;
	width:50vw;
	float:none;
	}

.border-line {
	border-bottom:1px solid #009;
	padding-bottom:2vw;
	width:94%;
	margin:0 auto 4vw;
}

.blank-box {
	width:94%;
}
	
.title2 {
	float:none;
	position: relative;
	}
	
.title2 h4 {
	font-size:4.2vw;
	line-height: 5vw;
	margin:2vw 3vw;
	padding:2vw 4vw;
	border-left:8px solid #FC0;
	font-weight:600;
	}

.title2 p {
	width:auto;
	font-size:3.9vw;
	padding-left:0;
	padding: 1vw 0;
	line-height:5vw;
	text-align:justify;
	text-justify:inter-ideograph;
	}

.migisoroe1 {
	position:absolute;
	bottom:-7vw;
	font-size:3.4vw;
	}

.migisoroe2 {
	position:absolute;
	bottom:-12vw;
	font-size:3.4vw;
	}


.detail1 {
	padding:2vw 3vw;
	font-size: 3.9vw;
	line-height: 5vw;
	}
	
.detail1 p {
	padding:3vw 0 0;
	}

.detail1 li {
	margin-left:2vw auto;
	}
	
.detail1 h5 {
	font-size:3.9vw;
	margin-top:5vw;
	}

.detail2 {
	float:none;
	width:auto;
	padding:0 3vw;
	margin:5vw auto;
	font-size: 3.9vw;
	line-height: 5vw;
	}

.title2-box img {
	float:none;
	width:90%;
	max-width:90%;
	margin:10px auto;
	display: block;
	}

.privacy ul {
	margin-left: 0;
}

.privacy li {
	line-height:5vw;
	list-style:none;
	padding:0 3vw;
	font-size: 3.9vw;
	}

.title-privacy {
	font-weight:600;
	margin:3vw 0 1.2vw;
	}

.access ul {
	list-style:none;
	margin-left:5vw;
	margin-top:6vw;
	float:none;
	font-size:3.9vw;
	}

.access iframe {
	float:none;
	display: block;
	margin: 1vw auto;
	width:90vw;
	}

.contact ul {
	margin:3vw 3vw 9vw;
	font-size:3.9vw;
	list-style: none;
	line-height: 5.5vw;
	}

.contact li {
	margin: 1vw auto;
}
	
.contact .btn {
	height:40px;
	width:100px;
	text-align:center;
	border:2px solid #00F;
	border-radius:10px;
	color:#00F;
	font-size:16px;
	background-color:#Fff;
	margin:10px 20px 20px;
	padding:5px;
	float:right;
	}
	
.contact .btn:hover {
	border:2px solid #FF0;
	color:#fff;
	background-color:#00F;
	font-weight:600;
	}

.form2 {
	width:auto;
	margin:3vw;
	background-color:#ffc;
	padding:10px;
	font-size:3.9vw;
	}

.form2 h4 {
	padding: 1vw 2vw;
}
	
.form2 dl {
	margin:3vw auto;
	}
	
.form2 dt{
	float:none;
	width:auto;
	margin:0;
	width:50vw;
	font-size: 3.9vw;
	}

.form2 dd {
	width:95%;
	margin:1vw auto;
	}

textarea {
	width:100%;
	float: none;
	margin: auto;
}
	
.form2 .required:after {
	content:"（必須）";
	color:#F00;
	font-size:11px;
	font-weight:600;
	}

.naisou {
	padding:1vw;
	background:#ffa;
	border:1px solid #fff;
	}

.nengajou {
	margin:20px auto;
	}
	
.nengajou p {
	margin-left:0;
	padding: 1vw 3vw;
	font-size:3.9vw;
	}
	
.nengajou ul {
	margin:2vw 3vw;
	}
	
.nengajou li {
	font-size:3.8vw;
	list-style:none;
	margin: 1vw 2vw;
	}

.nengajou img{
	width:100%;
	margin-left:0; 
}

.meishi {
	width:auto;
	margin-left:0;
	}
	
.meishi img {
	width:100%;
	margin:2vw auto;
	}
	
.meishi p {
	width:auto;
	line-height:5.3vw;
	font-size:3.9vw;
	padding: 1vw 3vw;
	}