@charset "UTF-8";

* { box-sizing:border-box }
padding * {0;}
margin * {0;}
a:link { color:rgb(127, 127, 127); text-decoration:none;}
a:hover { color:rgb(127, 127, 127); text-decoration:underline;}

a:visited { color:rgb(127, 127, 127) }


li { margin:0; padding:0; list-style: none;}

h1 {font-size:1em; letter-spacing: 0.1em;}
h2 {font-size:0.6em; letter-spacing: 0.1em;}
p {font-size:0.5em; font-weight: lighter;}




#header {
	position: fixed; 
	width:100%; 
	height:70px; 
	top:0; 
	left:0; 
	padding:0; 
	background: #fff; 
	z-index:500; 
	box-shadow: 0px 4px 8px rgba(0,0,0,0.4); 
	text-align: center;
}



body { 
	margin:0;
	background:#fff; 
	font-family:"M PLUS Rounded 1c"; 
}

#footer { 
	position:relative; 
	margin:0; 
	height:80px;
	text-align:center; 
}

img {
	width:100%; 
	vertical-align: bottom;
}

#pagewrap { 
	max-height:100%; 
	margin:0; 
	padding:0; 
}


#icon {
	text-align: left; 
	margin:0; 
	padding:0;
}

#icon p {
	display: inline-block; 
	margin:0; 
	padding:0;
}

#bar-l {
	width:4px; 
	height:50px; 
	background-color:#F3FF00;
}
#bar-c {
	width:4px; 
	height:50px; 
	background-color:#EB56A7;
}
#bar-r {
	width:4px; 
	height:50px; 
	background-color:#2ED2DE;
}

#folio-name {
	position: absolute;
	width:100%;
	text-align: left;
	top:10px;
	left:30px;
	line-height: 0.9em;
	
}

#folio-name h2 {
	font-size:0.9em;
	font-weight:lighter;
	
}

#folio-name a {
	text-decoration: none;
}








/*ナビドロワーここから*/
#nav-drawer {
	position: absolute;
	width:50px; height:70px;
	top:0px;
	right:0px;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	background: #fff;
	width: 70px;
  	height: 70px;
	
}

/*ハンバーガーアイコン*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  margin-top:25px;	
  height: 4px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 2px;
  background: #000;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: block;/*はじめは隠しておく*/
  position: fixed;
  z-index: 999;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 0;
  height: 0;
  background: black;
  opacity: 0;
  
}

/*中身*/
#nav-content {
  background-color: #D22E19; /*メニュー背景色*/
          box-sizing: border-box;
          height: 100%;
          padding: 10px 0px 10px 0px; /*メニュー内部上下左右余白*/
          position: fixed;
          right: -200px; /*メニュー横幅①と合わせる*/
          top: 0;
          transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
          width: 200px; /*メニュー横幅①*/
          z-index: 9999;
          list-style: none;
          text-align: center;
          line-height: 40px;
}

#nav-content a { display: block; width:100%; color:#fff }
#nav-content a:hover { background:#962617; text-decoration:none }

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
  opacity: 0.7; /*黒背景部分透過度*/
  height: 100%; width: 100%; z-index: 1;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(-200px);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}



#main { 
	position: relative; 
	padding-top:60px;  
	margin:0;
}


#contents { position: relative;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:5px;
	background:#E6E5DE; 
}

#graphicwrap, #webwrap, #cirogowrap {
	text-align: center;
	background: #fff;
	margin-bottom:10px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	
}


#graphicwrap h1, #webwrap h1, #cirogowrap h1 {
	font-size:0.6em;
	line-height: 30px;
	text-align: right;
	letter-spacing: 0;
}


#graphicwrap h2, #webwrap h2, #cirogowrap h2 {
	font-size:0.6em;
}


#graphic-title, #web-title, #cirogo-title {
	position: relative;
	padding-top:10px;
}
#label {
	
	width:80px;
	height:30px;
	background:#000;
	padding-right:10px;
	border-radius: 0 15px 15px 0 / 0 15px 15px 0 ; 
}

#graphic-title h1 {background: #F3FF00;}
#web-title h1 {background: #EB56A7;}
#cirogo-title h1 {background: #2ED2DE;}

#copy {
	position: absolute;
	top:10px;
	left:90px;
	width:100%;
	text-align: left;
}

.slide-wide {
    display: none;
}

/*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : 60vw;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 27s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 9s }
.slide img:nth-of-type(3) { animation-delay: 18s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   8% { opacity: 1 }
  25% { opacity: 1 }
  33% { opacity: 0 }
 100% { opacity: 0 }
}



#go-top {
	position: fixed;
	width:60px;
	bottom:10px;
	right:20px;
    opacity:0.8;
	
}

#designed p { 
	display: block;
	width:100%;
	height:30px;
	background-color: #000;
	color:#fff;
	line-height:30px ;
	padding-top:0px;
	margin-top:0;
	
}

#graphic-folio {display: none;}
#cirogo-folio {display: none;}

#button-contact {
	position: relative;
	margin-top:50px;
	margin-left:30%;
	appearance: none;
	outline: none;
	width:40%;
	height:40px;
	border-radius:5px;
	border-style:none;
	border: solid 2px #EB56A7;
	color:#EB56A7;
	background: #fff;
	font-size:1em;
}




#button-contact a {
	position: absolute;
	display: block;
	top:0;
	left:0;
	width:100%;
	height:100%;
	line-height: 37px;
	font-size:0.9em;
	color:#EB56A7;
	letter-spacing: 0.2em;
	
}


#button-contact :hover {
	background:#EB56A7;
	color:#fff;
}



#contact {
	display:block;
	position:relative; margin-top:40px;
}

#contact h1 {text-align: center;}
#contact h4 {
	font-weight:lighter;
	font-size:0.9em;
	text-align: center;
}
#contact input {
	width:80%;
	height:30px;
	padding-left:5px;
	margin-bottom:10px;
	margin-left:10%;
	border-radius:2px;
	border-style:none;
	border: solid 1px #999;
}

#comment {
	width:80%; 
	height:200px;
	padding-left:5px;
	margin-left:10%;
	border-radius:2px;
	border-style:none;
	border: solid 1px #999;
}



#contact .submit-btn {
	position: relative;
	display: block;
	text-align: center;
	appearance: none;
	outline: none;
	border-style:none;
	-webkit-appearance: none;
	width:30%;
	margin-left:35%;
	font-size:1em;
	margin-top:20px;
	padding:0;
	height:35px;
	border-radius:5px;
	border: solid 2px #EB56A7;
	color:#EB56A7;
	background: #fff;
	cursor: pointer; 
	
}

#contact .submit-btn:hover {
	color:#fff;
	background: #EB56A7;
	transition: 0.3s;    
}

#contact p {
	font-size:0.7em;
	font-weight: lighter;
	text-align: center;
}


#thanks {display:none;}
#thanks h1 {font-size:1em;}
#thanks h2 {
	font-size:0.7em; 
	font-weight:lighter; 
	text-align: center;
	
}

#thanks img {
	width:26%;
	margin-top:30px;
	margin-left:37%;
	margin-bottom:10px;
}

#footer-rogo {
	width:30%;
	margin-left:35%;
}




/*　画面サイズが568pxからはここを読み込む　*/  
@media screen and (min-width:568px){ 

    
.sp {display: none;}
#contents { position: relative;
	padding-top:40px;
	padding-left:40px;
	padding-right:40px;
	padding-bottom:40px;
	background:#E6E5DE; 
}
	
#graphicwrap, #webwrap, #cirogowrap {
	margin-bottom:20px;
}
	

#copy {top:17px; left:100px;}
#makeImg {height:30em;}
	
#thanks img {
	width:20%;
	margin-top:40px;
	margin-left:40%;
	margin-bottom:30px;
}		


	
/*　画面サイズが768pxからはここを読み込む　*/ 	
@media screen and (min-width:768px) { 

    
#contact .submit-btn {
	position: relative;
	display: block;
	text-align: center;
	appearance: none;
	outline: none;
	border-style:none;
	-webkit-appearance: none;
	width:14%;
	margin-left: 43%;
	font-size:1em;
	margin-top:20px;
	padding:0;
	height:35px;
	border-radius:5px;
	border: solid 2px #EB56A7;
	color:#EB56A7;
	background: #fff;
	cursor: pointer; 
	transform: translate(50% 0);
	
}	
	
#thanks img {
	width:12%;
	margin-top:40px;
	margin-left:44%;
	margin-bottom:30px;
}

#footer-rogo {
	width:20%;
	margin-left:40%;
}
	
	
	
/*　画面サイズが900pxからはここを読み込む　*/ 	
@media screen and (min-width:900px) { 
    
.slide {display: none;}    
.slide-wide {display: block;}
    
/*=== 画像の表示エリア ================================= */
.slide-wide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : 30vw;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
    
/*=== 画像の設定 ======================================= */
.slide-wide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 27s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide-wide img:nth-of-type(1) { animation-delay: 0s }
.slide-wide img:nth-of-type(2) { animation-delay: 9s }
.slide-wide img:nth-of-type(3) { animation-delay: 18s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   8% { opacity: 1 }
  25% { opacity: 1 }
  33% { opacity: 0 }
 100% { opacity: 0 }
}
    
.sp {display: none;}
	
#copy {top:17px; left:120px;}	
	
#icon {
	text-align: center; 
	margin:0; 
	padding:0;
}

#icon p {
	display: inline-block; 
	margin:0; 
	padding:0;
}

#bar-l {
	width:3px; 
	height:25px; 
	background-color:#F3FF00;
}
#bar-c {
	width:3px; 
	height:25px; 
	background-color:#EB56A7;
}
#bar-r {
	width:3px; 
	height:25px; 
	background-color:#2ED2DE;
}

#folio-name {
	position: absolute;
	width:100%;
	text-align: center;
	top:17px;
	left:0;
	font-size:0.9em;
	line-height: 1.1em;
}
	
#go-top {
	position: fixed;
	width:60px;
	bottom:60px;
	right:20px;
	
}
	
#contents { position: relative;
	padding-top:60px;
	padding-left:60px;
	padding-right:60px;
	padding-bottom:30px;
	background:#E6E5DE; 
}

#graphicwrap, #webwrap, #cirogowrap {
	text-align: center;
	background: #fff;
	margin-bottom:40px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	
}


#graphicwrap h1, #webwrap h1, #cirogowrap h1 {
	font-size:0.8em;
	line-height: 30px;
	text-align: right;
	letter-spacing: 0;
}


#graphicwrap h2, #webwrap h2, #cirogowrap h2 {
	font-size:0.8em;
}
	
#label {
	
	width:100px;
	height:30px;
	background:#000;
	padding-right:10px;
	border-radius: 0 15px 15px 0 / 0 15px 15px 0 ; 
}
	
#contact {
	display: block; 
	position:relative; 
	margin-top:40px;
	}

#contact h4 {
	font-weight:lighter;
	font-size:0.9em;
}
#contact input {
	width:70%;
	height:40px;
	padding-left:5px;
	margin-bottom:10px;
	margin-left:15%;
	border-radius:2px;
	border-style:none;
	border: solid 1px #999;
}

#comment {
	width:70%; 
	height:200px;
	padding-left:5px;
	margin-left:15%;
	border-radius:2px;
	border-style:none;
	border: solid 1px #999;
}
	
#contact .submit-btn {
	position: relative;
	display: block;
	text-align: center;
	appearance: none;
	outline: none;
	border-style:none;
	-webkit-appearance: none;
	width:14%;
	margin-left: 43%;
	font-size:1em;
	margin-top:20px;
	padding:0;
	height:35px;
	border-radius:5px;
	border: solid 2px #EB56A7;
	color:#EB56A7;
	background: #fff;
	cursor: pointer; 
	transform: translate(50% 0);
	
}

#contact .submit-btn:hover {
	color:#fff;
	background: #EB56A7;
	transition: 0.3s;    
}