@charset "utf-8";

/*--- reset */

html {
	overflow-y: scroll; 
	font-size: 62.5%;　/*フォントサイズを10pxに設定*/
}

body,
html {  
    height: 100%;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
figure,
blockquote {
	margin: 0;
	padding: 0;
}
	
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size:100%;
}


caption {text-align: left;}

q:before,
q:after {
	content: '';}

object,
embed {vertical-align: top;}

h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;}

img,
abbr,
acronym,
fieldset {border: 0;}

img{
	vertical-align: bottom;
	line-height: 0;
}

li {list-style-type: none;}
li img{vertical-align: bottom;}
p{
	text-justify: inter-ideograph;
}

a {color: #0a337f; text-decoration:none;}
a:hover{opacity:0.7;}
.underline{text-decoration:underline;}

/* clearfix */
.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

/*hr reset*/
hr {
	border: 0;
	height: 0;
	margin: 0;
	padding: 0;
}
.hr01{
	border-bottom:1px #ddd solid;
}

/*font*/
.f-marker {
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff766 0%) repeat scroll 0 0;
}
.f-center{ text-align:center;}
.f-left{ text-align: left;}

/*flex*/
.flex-bt, .flex-center, .flex-stand{
	display: -webkit-flex;
    display: flex; 
}
.flex-bt{
	-webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex-center{
	-webkit-justify-content:center;
    justify-content:center;
}
.flex-stand{
	-webkit-justify-content:start;
    justify-content:start;
}
.flex-chuo{align-items: center;}
.flex-order1{order:1;}
.flex-order2{order:2;}

/*margin*/
.mb40{ margin-bottom:40px;}
.mb80{ margin-bottom:80px;}

/*padding*/
.ptb80{ padding:80px 0;}

/*img*/
.img-auto{
	width:100%;
	height:auto;
}

/*border-box*/
.border-b{ box-sizing:border-box;}

/*animation*/
.animated{}
.aniBox{overflow:hidden;}
.invisible {
	transition: opacity 0.5s ease;
	opacity: 0.0;
}
.visible {
	transition: opacity 0.5s ease;
	opacity: 1.0;
}
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 100ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
.fade {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
.css-animate-fade{
	width:100%;
	height:200px;
	background:#F99;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*iphone reset*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*====================================
 default 
====================================*/
body {
	background: #fff;
	color: #000;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size:1.8em ; /*bodyの指示はemに。chromeバグ対策 16px*/
	font-weight:200;
	line-height: 2;
	text-align: left;
}
#wrap{
	position:relative;
	height:auto;
}
#wrap:before {
    content: "";
    display: block;
}
.contents{
	width:1100px; /*コンテンツの幅指定*/
	margin:0 auto;
	position:relative;
}
.align-c{
	align-items: center;
}

@media screen and (min-width: 769px) {
	.pc-none{
		display:none;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
}
@media screen and (max-width: 768px) {
}


/*====================================
 header
====================================*/
header {
    left:0;
    top:0;
    position: sticky;
    width: 100%;
	height:100px;
    z-index: 1000;
}
header h1{
	padding:10px 0 0 20px;
}

/*====================================
 midashi
====================================*/
/*H2*/
h2, h3, h4{
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	letter-spacing:1rem;
}
.h_en{
	color:#003b81;
	display:block;
	font-weight:200;
	font-family: 'Baskervville', serif;
	letter-spacing:0;
}
h2{
	font-size:133%;
	line-height:1.4;
	text-align:center;
}
h2 .h_en{
	font-size:300%;
}

h3, h4{
	font-size:200%;
	font-weight:400;
}
h3 .h_en::first-letter {
	text-decoration:underline;
}

/*====================================
 contents
====================================*/
/*main*/
.main{
	background:url(../images/main_bg.jpg) no-repeat center center;
	background-size: cover;
	position:relative;
	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
	display:flex;
	height:100vh;
	margin:-100px 0 0 0;
}
.main h2{
	margin: 50vh auto 0;
	transform: translateY(-50%);
	text-align: center;
}

/*message*/
.message{
	padding:120px 0 280px 0;
	background:url(../images/message_bg.jpg) no-repeat right top;
}

/*.service*/
.service{
	margin:-80px 0 0 0;
}
.service_ttl{
	margin-right: calc(50% - 500px);
	position:relative;
}
.service_ttl:after{
    content:"Service";
	margin-right:-150px;
}
.service_ttl .txtbox{
	width:calc(30% - 80px);
}
.service_ttl .img{
	width:70%;
	height:600px;
	position:relative;
	overflow:hidden;
	z-index:11;
	background:#ccc;
}
.service_ttl .img img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
}
.cont_right{
	margin:-40px 0 0 calc(50% - 500px);
	position: relative;
}
.cont_left{
	margin:-40px calc(50% - 500px) 0 0;
	position: relative;
}
.service_ttl:after, .cont_right:after, .cont_left:after {
	font-family: 'Baskervville', serif;
	font-size:180px;
	position:absolute;
	color:#f3f5f7;
	bottom:-100px;
}
.cont_right:after {
	left:0;
}
.service_ttl:after, .cont_left:after {
	right:0;
}
.cont_right .txtbox, .cont_left .txtbox{
	width:calc(55% - 120px);
	z-index:5;
}
.cont_right .img, .cont_left .img{
	width:45%;
	height:680px;
	z-index:10;
	overflow:hidden;
	position:relative;
}
.cont_right .img img, .cont_left .img img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
}

.Restaurant:after{
    content:"Restaurant";
	margin-left:-80px;
}
.E-commerce:after{
    content:"E-commerce";
	margin-right:-200px;
}
.Apparel:after{
    content:"Apparel";
    margin-right:50px;	
}
.ADDesign:after{
    content:"ADDesign";
	margin-left:-50px;
}

/*news*/
.news{
	padding:120px 0 0 0;
}
.news .contents{
	padding:80px 0 0 0;
	border-top:1px solid #000;
}
.news_list{
	width:450px;
	margin:0 auto;
	text-align:left;
}
.news_item{
	padding:0 0 20px 0;
}
.news_date{
	margin-right:30px;
}

/*company*/
/*map*/
.map iframe{
	width:100%;
	height:600px;
	border:none;
}
.company{ margin:220px 0 0 0;}
.company .contents{
	padding:80px 0 120px 0;
	border-bottom:1px solid #000;
}
.company h2, .company dl{
	width:50%;
}
.company dt{
	margin:0 0 40px 0;
	padding:0 0 40px 0;
	border-bottom:1px solid #000;
}
.company li:nth-child(1){ width:20%;}
.company li:nth-child(2){width:3rem;}

/*form初期化*/
.entry_form, .formWrap{
	padding:0 100px;
}
.entry_form dl, .formWrap dl{
	margin:0 0 40px 0;
	display: -webkit-flex;
    display: flex; 
	-webkit-justify-content: space-between;
    justify-content: space-between;
}

.entry_form dt, .formWrap dt{
	display: -webkit-flex;
    display: flex; 
	-webkit-justify-content: space-between;
    justify-content: space-between;
	width:27%;
	line-height:1.4;
}
.formWrap dt{
	width:30%;
	padding:0 0 3rem 0;
	border-bottom:1px solid #003b81;
}
.entry_form .hissu{
	padding:1rem;
	font-size:88%;
	color:#1a70ad;
	border:1px solid #1a70ad;
}
.entry_form dd, .formWrap dd{
	width:70%;
}
.formWrap dd{
	padding:0 0 3rem 0;
	border-bottom:1px solid #ccc;
}
.entry_form input[type="text"], .entry_form button,
.entry_form textarea {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	appearance: none;
	box-sizing:border-box;
}
.entry_form input[type="text"] , .entry_form textarea{
	width:100%;
	padding:1rem;
	font-size:1.8rem;
	outline: none;
	background:#f5f5f5;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*
.entry_form input[type="radio"]  {
	padding:1em;
	border:1px solid #ddd;
}
*/
.entry_form textarea{
	width:100%;
}
.entry_form input[type="text"]:focus,
.entry_form textarea:focus {
	border: 1px solid #666;
	background:#fff;
}
/*radio*/
input, textarea {
    border: 1px #ddd solid;
    padding: 5px 10px;
}

#button01, #button02 {
	padding:0 5rem;
	line-height:80px;
	font-size:133%;
	letter-spacing:1rem;
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	display: inline-block;
	font-weight:600;
	outline: none;
	background-color: #003b81;
	color: #fff;
	border:none;
	cursor:pointer;
}
#button01:hover, #button02:hover {
	border: none;
	background:#000;
}
#button02{
	background:#666;
}
.error_messe{
	font-weight:bold;
	color:#C00;
	font-size:133%;
}
.thanks{
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	text-align:center;
	font-size:133%;
}

@media screen and (min-width: 769px) {
}


/*====================================
 FOOTER
====================================*/
footer {
	padding:60px 0;
	background:#000;
	color:#fff;
}
footer p{
	font-size:77%;
	text-align:center;
}

/*pagescroll*/
#scrollUp {
    bottom: 0;
    right: 0;
	opacity:0.9;
}