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

body{
	
}

#wrapper{
	width: 100%;
	height: auto;
	overflow: hidden;
}
a[href*="tel:"] {
	pointer-events: none;
}

/*------------------------------------------------------------
	ヘッダー　　ナビ意外
------------------------------------------------------------*/
h1{
	width: 250px;
	height: 42px;
	box-sizing: border-box;
}
h1:hover{
	opacity: 0.7;
}
.headwrap{
	width: 100%;
	height: 70px;
	background-color:rgba(255,255,255,0.8);
	position: fixed;
	top:0;
	z-index: 5;	
}
.header{
	width: 100%;
	max-width: 1200px;
	height: 70px;
	margin: 0 auto;
	position: relative;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	margin-top: 10px;
	box-sizing: border-box;
}

/*------------------------------------------------------------
	ヘッダーナビゲーション
------------------------------------------------------------*/
.btn-gnavi{
	width: 100%;
	max-width:  923px;/*1200-257-10-10*/
	height: 70px;
	position: absolute;
	top:0;
	right: 10px;
	box-sizing: border-box;
}
ul.menubox{
	font-family: 'Candal', sans-serif;/*googleFonts*/
	width: 600px;/*1200-257-10-10*/
	height: 70px;
	position: absolute;
	top:0;
	right: 10px;
	display: flex;
	justify-content:space-between;
  	align-items: center;
	margin-top: 10px;
	box-sizing: border-box;
}
ul.menubox li {
	width: auto;
	height: 70px;
	text-align: center;
	box-sizing: border-box;
	font-size: 16px;
  /*アニメーションの速度設定*/
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	box-sizing: border-box;
}

/*ホバーエフェクト  1.25倍に拡大*/

ul.menubox li:hover {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

/*------------------------------------------------------------
     フッター
------------------------------------------------------------*/
.footerwrap{
	width: 100%;
	height: 125px;
	background-color: #dcdcdc;
}
.footer{
	width: 1200px;
	height: 125px;
	margin: 0 auto;
	position: relative;
}
.footlogo{
	width: 100px;
	height: 79px;
	position: absolute;
	top:30px;
	left: 0;
}
.footsnsmenu{
	width: 170px;
	height: 35px;
	font-size: 35px;
	display: flex;
	position: absolute;
	top:50px;
	right: 0px;
}
.footsnsmenu li{
	margin: 0 10px;
	text-align: right;
}
.copyright{
	font-size: 0.7em;
	/* width: 250px; を削除するか、以下のように変更 */
	width: auto;
	white-space: nowrap; /* 強制的に1行にする魔法のコード */
	position: absolute;
	bottom: 10px;
	right: 0px; /* もし右端ギリギリすぎる場合は right: 20px; などに調整 */
	text-align: right;
}
/*------------------------------------------------------------
     共通 レイアウト
------------------------------------------------------------*/

.contents{
	width: 100%;
	height: auto;
}

.w1200wrap{
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
}
.box_flex1200{
	width: 100%;
	max-width: 1200px;
	height: auto;
	display:flex;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
	justify-content:space-between;/*両端から均等に配置*/
	margin: 0 auto;
	box-sizing: border-box;
}
.box_flex1200_evenly{
	width: 100%;
	max-width: 1200px;
	height: auto;
	display:flex;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
	justify-content:space-evenly;/*均等に配置各アイテムの周りに同じ大きさの間隔を置く*/
	margin: 0 auto;
}
.box_flex1200reverse{
	width: 100%;
	max-width: 1200px;
	height: auto;
	display:flex;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
	flex-direction: row-reverse;/*順番を逆に*/
	justify-content:space-between;/*両端から均等に配置*/
	margin: 0 auto;
}
/*------------------------------------------------------------
     共通 見出しなど
------------------------------------------------------------*/
.pageh2{
	width: 100%;
	height: auto;
	font-size: 150px;
	margin: 170px 0px 200px 0px;/*headnavの分上にマージン追加*/
	
}
/*------------------------------------------------------------
     トップページ
------------------------------------------------------------*/
.top_animation{
	width: 100%;
	height: 240px;
	text-align: center;
	margin: 100px auto 10px auto;/*headnav70の分上にマージン追加*/
}

.logoanime{
	width: 1200px;
	height: 260px;
	margin: 0 auto;
}
.logoanime video{
	display: block;
  width:100%;
  /* 背景画像の高さ */
  height: auto;

}
/*----------------------------動画---------------------------*/
.top_movbox{
  width: 100%;
  height: 100%;
	position: relative;
  overflow: hidden;
}
.mv_wrap{
	position: relative;
	height: 800px;	
}

.video video{
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 800px;
  /* 高さを維持したまま全体を表示させる */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.copybox{
	width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* レイヤー背景の上に乗せる */
  z-index: 3;
  margin: auto;
  text-align: center;
}
.maincopy{
	font-family: 'Candal', sans-serif;/*googleFonts*/
	font-size: 170px;
	text-align: center;
	margin-bottom: 100px;
}
.subcopy{
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	color: #ffffff;
}
/*----------------------------動画以下---------------------------*/
.toppagemenubox{
	width: 100%;
	height: auto;
	background: url("../imgs/bgdot_purple.jpg");
	padding: 100px 0px;
	box-sizing: border-box;
}
.topmenubox{
	width: 1200px;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
	justify-content:flex-end;/*左寄せ*/
	align-items:center;/*天地中央*/
}
.topmenubox2{
	width: 1200px;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
	justify-content:flex-start;/*左寄せ*/
	align-items:center;/*天地中央*/
}

.boxpagemenu{
	width: 600px;
	height: auto;
	color: #913b71;/*むらさき*/	
	
}
.boxpagemenu:hover{
	color: #91df4d;/*みどり*/
	  /*アニメーションの速度設定*/
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.ttlpagemenu{
	font-size: 70px;
	margin-bottom: 40px;
}
.texpagemenu{
	font-size: 25px;
	font-weight: 700;
	line-height: 40px;
}

/*about*/
.bg_A{
	width: 100%;
	height: 475px;
	background: url("../imgs/bg_typeA.png") no-repeat;
	background-position: top left;
}
.topaboutimg{
	width:340px;
	height: auto;
	margin-right: 50px;
}
.topaboutimg img{
	width: 100%;
	height: auto;
}

/*Quality*/
.bg_Q{
	width: 100%;
	height: 475px;
	background:url("../imgs/bg_typeB.png") no-repeat;
	background-position: top right;
}
.topQualityimg{
	width:340px;
	height: auto;
	margin-right: 50px;
}
.topQualityimg img{
	width: 100%;
	height: auto;
}

/*Works*/
.bg_W{
	width: 100%;
	min-height: 475px;
	background:url("../imgs/bg_typeW.png") no-repeat;
	background-position: top left;
}
.topWorksimg{
	width:340px;
	height: auto;
	margin-right: 50px;
}
.topWorksimg img{
	width: 100%;
	height: auto;
}



/*---------矢印-----------*/
.arrow{
    position: relative;
    display: inline-block;
    padding: 0px 0 0 0;
    vertical-align: middle;
    text-decoration: none;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.witelinearrow::before{
    right: 3px;
    width: 100px;
    height: 100px;
    border-top: 10px solid #ffffff;
    border-right: 10px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*---------NEWS-----------*/

.newsArea{
	width: 100%;
	height: auto;
	padding: 50px 0px;
	background-color: #dcdcdc;
}
h2.topnews{
	font-size: 70px;
	color: #913b71;/*むらさき*/	
	margin-bottom: 50px;
}

.newsbox{
	width: 100%;
	height: auto;
	border-bottom: solid #444444 1px;
	box-sizing: border-box;
	padding: 50px 0px;
	display: flex;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
	justify-content:space-between;/*両端から均等に配置*/
	align-items:center;/*天地中央*/

}

.newstexbox{
	width: 700px;
	height: 200px;
	margin-right: 100px;
}
.picnews{
	width: 330px;
	height: 200px;
	background-color: #777777;
	overflow: hidden;
}
.newsdate{
	font-size:0.8em;
	font-family: 'Candal', sans-serif;/*googleFonts*/
}
.newsicon_news,.newsicon_works,.newsicon_info{
	width: 120px;
	height: 40px;
	font-size: 0.9em;
	font-weight: 700;
	color: #ffffff;
	border-radius: 20px;
	text-align: center;
	line-height: 40px;
	margin: 0 5px;
}


.newsicon_news{
	background-color: #913b71;/*むらさき*/
}
.newsicon_works{
	background-color: #f76711;/*オレンジ*/
}
.newsicon_info{
		background-color: #ef3d98;/*ピンク*/	
}

.newspage_iconbox{
	display: flex;
	margin: 5px 0 15px 0;
}


.newsttl{
	width: 100%;
	height: auto;
	font-size: 1.3em;
	margin-bottom: 10px;
	margin-top:10px;
	font-weight: 700;
}

.newstex{
	width: 100%;
}
.newstex p{
		margin-bottom: 1em;
	}
.box_btnall{
	width: 150px;
	height: auto;
	margin: 50px auto;
}
.btn_viewall{
	font-size:30px;
	font-family: 'Candal', sans-serif;/*googleFonts*/
	width: 150px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
 	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.line {
  padding-bottom: 15px;
  position: relative;
}
.line::before {
  background: #913b71;/*むらさき*/	
  content: '';
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.line:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}
/*------------------------------------------------------------
     アバウトページ
------------------------------------------------------------*/
.linewarpbox{
	width: 1200px;
	height: auto;
}

.about_mainimg{
	width: 600px;
	height: auto;
	text-align: center;
	padding-bottom: 200px;
}
.about_gifbox{
	width: 400px;
	height: 430px;
	margin: 0 auto;
}

.about_mainimg_empty{
	width: 600px;
	height: auto;
	padding-bottom: 200px;
}
.abouttexbox{
	width: 600px;
	height: auto;
	padding: 50px;
	box-sizing: border-box;
}
.abouth3{
	margin-bottom: 1em;
}
.about_design{
	width: 600px;
	height: 600px;
	font-size: 140px;
	font-family: 'Candal', sans-serif;/*googleFonts*/
	text-align: center;
	padding-top: 100px;
}

.centerline{
	border-right: solid 10px #dec4d4;
}
h2.AboutSuccess{
	width: 1200px;
	height: auto;
	font-size: 140px;
	text-align: center;
	color: #913b71;/*むらさき*/
	margin: 50px 0px;
}



.mebox{
	width: 100%;
	height: auto;
	margin-top: 300px;
}
.meh2{
	width: 1200px;
	height: 85px;
	font-size: 170px;
	color: #66a5e9;
	margin: 0 auto;
}
.meimg{
	width: 100%;
	height: 570px;
	overflow: hidden;
	background: url("../imgs/img_me.jpg") no-repeat;
	background-size: cover;
	background-position: top center;

}
.mettl{
	width: 600px;
	height: auto;
	font-family: 'Candal', sans-serif;/*googleFonts*/
	font-size: 70px;
	color: #66a5e9;
	margin-top: 20px;
}
.metex{
	width: 600px;
	height: auto;
	margin-bottom: 100px;
}

.mebox_bgyellow{
	width: 100%;
	height: auto;
	background-color: #fff9e9;/*黄色*/
	padding-top: 50px;
	margin-bottom: 50px;
}
.licensebox{
	width: 600px;
	height: auto;
	margin-bottom: 100px;
}
.license{
	width: 600px;
	height: auto;
	margin-top: 10px;
}

/*----------インスタ------------*/
 ul.insta_list {
width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
	 margin-bottom: 50px;
}
ul.insta_list li {
  list-style: none;
  width: 300px;
	margin: 0 50px;
	height: auto;
  margin-bottom: 1vw;
}
ul.insta_list li img{
	width: 100%;
	height: auto;
}
ul.insta_list li a p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
ul.insta_list li a p span {
  font-size: 120%;
}


/*------------------------------------------------------------
     品質ページ
------------------------------------------------------------*/

.qualitypageimg{
	width: 351px;
	height: 306px;
	margin: 0 auto 50px auto;
}
.qualitylist{
	width: 100%;
	height: auto;
	padding: 50px 0px;
}
.qualitylist_h3{
	text-align: center;
	padding: 10px 0px;
	color: #ffffff;
}
.qualitylist_tex{
	width: 1200px;
	height: auto;
	margin: 50px auto;
}

/*------------------------------------------------------------
     制作実績ページ
------------------------------------------------------------*/
.workspageimg{
	width: 322px;
	height: 261px;
	margin: 0 auto;
}
.works_h3{
	text-align: center;
	padding: 10px 0px;
	color: #913b71;/*むらさき*/
}
.bg_dtp{
	background-color: #dec4d4;
}
.bg_web{
	background-color: #aebcea;
}
.bg_other{
	background-color: #7ddbff;
}
/*---------ロゴを中心に回転------------*/
.logocirclebox{
	width: 708px;
	height: 708px;
	margin: 50px auto;
	position: relative;
}

 /*回転アニメーション*/
.logocircle {
   animation:logocircle ease-in 9s infinite;;
}

@keyframes logocircle {
   0% {
       transform:rotate(0deg);
   }
   100% {
       transform:rotate(360deg);
   }
}
/*センターで重ねる*/
.workslogo{
	width: 162px;
	height: 163px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

/*---------ロゴを中心に回転 ここまで------------*/

.workswrap{
	width: 1200px;
	height: auto;
	background: url("../imgs/bg_Performance.jpg");
	background-repeat: repeat-y;
	background-position: top 0 left 200px;
	margin-top: 100px;
}


.ttl_works{
	width: 420px;
	height: 174px;
	margin: 0 auto 50px;
}
.tagbox{
	width: 100%;
	height: 42px;
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
	margin-bottom: 50px;
}


ul.tag_list li{
	display: inline-block;
	width: auto;
	height: 42px;
	padding: 0px 20px;
	line-height: 42px;
	border: solid 1px #333333;
	border-radius: 21px;
	box-sizing: border-box;
	font-size: 14px;
	text-align: center;
	margin: 0px 5px 10px 0px;
}

ul.tag_list li::before{
	content: "#";
}
ul.tag_list li:hover{
	background-color: #dcdcdc;
}


ul.worklist{
	width: 100%;
	height: auto;
	display:flex;
	justify-content: space-around;
	flex-wrap: wrap;/*一行に収まらない時に複数行に*/
}

/*最後の行だけ左寄せに*/
ul.worklist::after{
	 content: "";
    display: block;
    width: 330px;
}

li.worksbox{
	width: 330px;
	height: auto;
	margin-bottom: 70px;
}


.workspic{
	width: 330px;
	height: 200px;
	margin-bottom: 20px;
	overflow: hidden;
}
.worksbox img{
	width: 100%;
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.worksbox:hover img{
	width: auto;
  height: auto;
  transform: scale(1.1); /* 拡大 */
}
.worksname{
	width: 100%;
	height: auto;
	margin-top: 10px;
}
.viewallworksbox{
	width: 100%;
	margin:50px 0 100px 0;
	display: flex;
	justify-content: flex-end;
}
.btn_viewallworks{
	width: 200px;;
	height: 42px;
	padding: 0px 20px;
	line-height: 42px;
	border-radius: 21px;
	box-sizing: border-box;
	font-size: 14px;
	text-align: center;
	font-weight: 900;
}
.btn_viewallworks:hover{
	color: #ffffff;
}



/*------------------------------------------------------------
     実績の一覧ページ
------------------------------------------------------------*/
.paginationbox{
	width: 100%;
	margin-bottom: 50px;
	
}

/*ページ送りwordpress自作php対応ここから*/
.pagination{
   margin:40px 0 0;
}
.nav-links{
   display:flex;
}
.pagination .page-numbers{
   display:inline-block;
   margin-right:10px;
   padding:15px 25px;
   color:#333;
   border-radius:30px;
   /*box-shadow:0 3px 3px #dec4d4;*/
	/*border: solid 1px #dec4d4;*/
   background:#dec4d4;
}
.pagination .current{
   padding:15px 25px;
   background:#913b71;
   color:#fff;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#913b71;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}

/*ページ送りwordpress自作php対応ここまで*/




/*------------------------------------------------------------
   お問合せページ
------------------------------------------------------------*/
.formWrap{
	width: 1000px;
	height: auto;
	margin: 100px auto;
}
.formTable{
	width: 100%;
	text-align: left;
}
.formTable tr{
	margin-bottom: 20px;

}
.formTable input,textarea{
	padding: 10px;
	border: solid 1px #888888;
	border-radius: 10px;
	width: 100%;
}
.formTable th{
	width: 30%;
	padding: 10px;
	vertical-align: middle;
}
.formTable td{
	width: 70%;
	padding: 10px;

}
input[type="submit"]{
		width: 50%;
	display: block !important;
	margin: 10px auto 20px auto;
	background-color: #913b71;/*むらさき*/
	padding: 20px;
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
	font-weight: 700;
	font-size: 1.3em;
	letter-spacing: 1em;
	transition: .3s;
}
/*
.btn_sendmail{
	width: 50%;
	display: block !important;
	margin: 10px auto 20px auto;
	background-color: #913b71;
	padding: 20px;
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
	font-weight: 700;
	font-size: 1.3em;
	letter-spacing: 1em;
	transition: .3s;
}
*/
/*コンタクトフォームで送信ボタンが中央にこない原因spanが入っている*/
span.wpcf7-spinner {
    display: none;
}
.btn_sendmail:hover{
transform: scale(1.1);
}

/*コンタクトフォーム7でreCAPTCHAのマーク消してPポリシー入れる　ここから*/
.googlepp{
	font-size: 0.6em;
	line-height: 1em;
	text-align: center;
}

.grecaptcha-badge { visibility: hidden; }

/*コンタクトフォーム7でreCAPTCHAのマーク消してPポリシー入れる　ここまで*/


.adressbox{
	width: 50%;
	margin: 200px auto 50px auto;
	font-size: 1.1em;
	line-height: 2.5em;
	text-align: center;
}
.ttl_contact{
	font-weight: 700;
	margin-top: 30px;
	  display:flex;
  align-items: center;
  justify-content: center;
}
.ttl_contact::before,
.ttl_contact::after{
  content: "";
  flex-grow:1;
  border-top: 1px solid black;
}

.ttl_contact:before {
  margin-right: 1rem; 
}
.ttl_contact:after {
  margin-left: 1rem; 
}


.ppolicy{
	width: 90%;
	height: 150px;
	margin: 0 auto 50px auto;
	overflow: scroll;
	border: solid 1px #666666;
	font-size: 0.8em;
	line-height: 1.6em;
	padding: 1em;
}
.ppolicyttl{
	font-size: 0.9em;
	font-weight: 700;
	margin-top: 10px;
}
/*------------------------------------------------------------
    ニュース個別ページ
------------------------------------------------------------*/
.newspagebox{
	width: 1000px;
	height: auto;
	margin: 0 auto;
}
.pic_newspage{
	width: 800px;
	height: auto;
	margin: 50px auto;
}
.pic_newspage img{
	width: 100%;
	height: auto;
}


/*------------------------------------------------------------
    404ページ,メンテナンスページ
------------------------------------------------------------*/
.Sorrytex{
	text-align: center;
	font-size: 1.2em;
	line-height: 3em;
	width: 60%;
	min-width: 500px;
	height: auto;
	min-height: 500px;
	margin: 0 auto;
}
/*------------------------------------------------------------
    トップページにワインのバナー追加
------------------------------------------------------------*/
.ban_nowivent{
	width: 1013px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	
}
.ban_nowivent img{
	width: 100%;
	height: auto;
}