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

/* Reset */
html{}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* rayout */

html{
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: 'Yantramanav', sans-serif;
	font-weight:300;
	font-size:16px;
	line-height:1.8em;
	color:rgba(55,55,55,1.00);
	-webkit-text-size-adjust: 100%;
	background-color:rgba(255,255,255,1.0);
	}
	
body { margin: 0; padding: 0;}

h1 { font-size:200%; font-weight:100; line-height:1.2em;}
h2 { font-size:200%; font-weight:100; line-height:1.2em;}
h3 { font-size:100%; font-weight:100;}
h4 { font-size:90%; font-weight:100;}

.justify {text-align: justify;}

a{
    display:block;
	color:inherit;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
	text-decoration: none;
}
	
a:link { color:inherit; }
a:hover { color:tomato; }

a img:hover {opacity: 0.6; transition: 0.3s;}

p {text-align: justify;}

.br { margin-bottom: 1em; }
.menu_icon { font-size: 55%; vertical-align:25%;}

/*　メディアクエリ用　*/
.sp_none {display:inherit;}
.pc_none {display:none;}

.logo-animation {-webkit-animation-delay:3s; animation-delay:3s;}

.animation1 {-webkit-animation-delay:0.0s; -moz-animation-delay:0.0s; -o-animation-delay:0.0s; animation-delay:0.0s;}
.animation2 {-webkit-animation-delay:0.2s; -moz-animation-delay:0.2s; -o-animation-delay:0.2s;  animation-delay:0.2s;}
.animation3 {-webkit-animation-delay:0.4s; -moz-animation-delay:0.4s; -o-animation-delay:0.4s;  animation-delay:0.4s;}
.animation4 {-webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; -o-animation-delay:0.6s;  animation-delay:0.6s;}
.animation5 {-webkit-animation-delay:0.8s; -moz-animation-delay:0.8s; -o-animation-delay:0.8s;  animation-delay:0.8s;}


/*　ヘッダー＆メニューボタン用　*/
#header {
	position: fixed;
	width:100%;
	height:100px;
	margin: 0;
	background-color:rgba(55,55,55,1.0);
	z-index:9999;
}

.header_logo {z-index: 10000; width:100px; padding-top:10px; padding-left:5vw;}
.header_logo_fix { position: fixed; z-index: 10000; width:100px; padding-top:10px; padding-left:5vw;}

.header_space {width:100%; height:100px;}

.menu_header {
	width:100%;
	height:100px;
	margin: 0;
	background-color:rgba(55,55,55,1.0);
}

.menu_btn { display: block; position:fixed; top:25px; right:1vw; padding:0.25em 0.5em; border: solid 2px white; font-size: 200%; color: white; z-index: 10001; text-align: center; border-radius:10px; cursor: pointer; background-color: rgba(0,0,0,0.2);}
.menu_btn:hover { background-color: rgba(0,0,0,0.3); color: tomato; transition: 0.3s;}

#menubox {
	display:none;
	position:fixed;
	left:0;
	right:0;
	background-color: rgba(255,255,255,0.9);
	top:0;
	padding:0 0 0 0;
	text-align:left;
	z-index:9998;
	font-size:200%;
	letter-spacing:0.1em;
	font-weight:100;
	height:100vh;
}
.menu_first { display:block; width:90vw; border-bottom: solid 1px rgba(55,55,55,1.0); margin-left:5vw; padding:0.8em 0 0.75em 0;}
.menu_mid { display:block; width:90vw; border-bottom: solid 1px rgba(55,55,55,1.0); margin-left:5vw; padding:0.75em 0 0.75em 0;}
.menu_last { display:block; width:90vw; margin-left:5vw; padding:0.75em 0 0.85em 0;}
.menu_first:link, .menu_mid:link, .menu_last:link { }
.menu_first:visited, .menu_mid:visited, .menu_last:visited { }
.menu_first:hover, .menu_mid:hover, .menu_last:hover { color:tomato;}


/*フォトスライダー部分*/
#photo_slider { position:relative; width:100%; height:100vh;}
.main_photo_1 { position:relative; width:100%; height:100vh; background:url(../photo/main_photo_1.jpg) center bottom; background-size:cover;}
.main_photo_2 { position:relative; width:100%; height:100vh; background:url(../photo/main_photo_2.jpg) center; background-size:cover;}
.main_photo_3 { position:relative; width:100%; height:100vh; background:url(../photo/main_photo_3.jpg) left; background-size:cover;}
.main_photo_4 { position:relative; width:100%; height:100vh; background:url(../photo/main_photo_4.jpg) center; background-size:cover;}
.main_photo_5 { position:relative; width:100%; height:100vh; background:url(../photo/main_photo_5.jpg) center bottom; background-size:cover;}
.main_photo_halftone { position:relative; width:100%; height:100vh; background:url(../img/halftone.png) repeat;}
.main_photo_logo { position:relative; width:100%; height:50vh; background:url(../img/mici_url_logo.svg) no-repeat center; background-size:auto 50%;}

/*　コンテンツ部分　*/
.contents {position:relative; width:100%; display:flex; flex-direction: row;}
.contents_rev {position:relative; width:100%; display:flex; flex-direction:row-reverse;}
.page_contents {width:50%; padding: 10vh 25%;}
.box_red { width:50%; padding: 5vh; background-color: rgba(215,0,0,1.00); font-size: 200%; font-weight:100; color: white; vertical-align: middle; }
.box_white { width:50%; padding: 5vh; }

/*　ブリッジフォト　*/
.bridge_photo_1 { width:100%; height:55vh; background:url(../photo/bridge_photo_1.jpg) center; background-size:cover;}
.bridge_photo_2 { width:100%; height:55vh; background:url(../photo/bridge_photo_2.jpg) center; background-size:cover;}
.bridge_photo_3 { width:100%; height:55vh; background:url(../photo/bridge_photo_3.jpg) center; background-size:cover;}
.bridge_photo_4 { width:100%; height:55vh; background:url(../photo/bridge_photo_4.jpg) center; background-size:cover;}
.bridge_photo_5 { width:100%; height:55vh; background:url(../photo/bridge_photo_5.jpg) center; background-size:cover;}
.bridge_photo_6 { width:100%; height:55vh; background:url(../photo/bridge_photo_6.jpg) center; background-size:cover;}

/*　フォーム部分　*/
#form {width:60%; padding: 10vh 20%;}
.form_title {font-size: 400%; font-weight:100; }

/*　フッター部分　*/
#footer {
	clear:both;
	position:relative;	
	width:100%;
	height:50vh;
	bottom:0;
	background-color:rgba(180,180,180,1.00);

	margin-top:10vh;
	padding-top:5vh;
	}
	
.footer_logo { margin: 0 auto; width:25vh; height:25vh; background:url(../img/mici_logo.svg) center; background-size: contain; background-repeat: no-repeat;}
.footer_text { text-align: center;}
	
#copyright {
	position:absolute;
	width:100%;
	bottom:5vh;
	text-align:center;
	font-size:80%;
	}


/*　ページ送りボタン　*/
.next_btn { display: block; position:absolute; width:20vw; height:50px; bottom:100px; left:39.4vw; border: solid 2px white; font-size: 200%; color: white; z-index: 9997; text-align: center; border-radius:10px; cursor: pointer; background-color: rgba(0,0,0,0.2); line-height: 1.7em;}
.next_btn:hover { background-color: rgba(0,0,0,0.4); color:tomato; transition: 0.3s;}

/*　トップに戻るボタン　*/
.top_btn { display: block; position:fixed; bottom:100px; right:1vw; width:50px; height:50px; border: solid 2px white; font-size: 200%; color: white; z-index: 9996; text-align: center; border-radius:10px; cursor: pointer; background-color: rgba(0,0,0,0.2); line-height: 1.55em;}
.top_btn:hover { background-color: rgba(0,0,0,0.3); color: tomato; transition: 0.3s;}

/*　言語切り替えボタン　*/
.lang_btn { display: block; position:fixed; bottom:170px; right:1vw; width:50px; height:50px; border: solid 2px white; font-size: 150%; color: white; z-index: 9995; text-align: center; border-radius:10px; cursor: pointer; background-color: rgba(0,0,0,0.2); line-height: 2.2em;}
.lang_btn:hover,.lang_btn:active { background-color: rgba(0,0,0,0.3); color: tomato; transition: 0.3s;}

.lang_it{}
.lang_jp{display: none; font-family:"M+ C Type-1 (basic latin) Light","M+ Type-1 (general-j) Light", sans-serif;}
.lang_jp_title{ font-size: 75%; display: none; font-family:"M+ C Type-1 (basic latin) Thin","M+ Type-1 (general-j) Thin", sans-serif;}

/*　コンタクトフォーム　*/
input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:solid 1px #ccc; padding:1%;}
input:focus, textarea:focus { background-color:rgba(137,192,84,0.30);}
button, submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; font-size:14px;}
button:hover, submit:hover { background-color:rgba(50,150,50,1.0); transition: 0.3s ease-in-out;}
.form_left { width:30%; height:3em; padding-top:1em; text-align:left; float:left;}
.form_right { width:69%; height:3em; padding-top:1em; text-align:left; float:left;}
.submit_btn { background-color:rgba(137,192,84,1.00); padding:1em 1.5em; color:#FFF; margin-left:1em; cursor:pointer;}
.submit_btn:active { background-color:rgba(0,120,0,0.80);}
.reset_btn { background-color:#555; padding:1em 1.5em; color:#FFF; margin-left:1em; cursor:pointer;}
.reset_btn:active { background-color:#333;}
.form_left_end { width:30%; height:auto; padding-top:1em; text-align:left; float:left;}
.form_right_end { width:69%; height:auto; padding-top:1em; text-align:left; float:left;}
.hissu { font-size:80%; color:rgba(0,120,0,1.00); vertical-align:top;}
.textarea { width:100% !important; height:15em; border-color:#ccc; color:rgba(55,55,55,1.00);}
.textarea:focus { background-color:rgba(137,192,84,0.30);}
.input { width:100% !important; border-color:#ccc; color:rgba(55,55,55,1.00);}
.input:focus { background-color:rgba(137,192,84,0.30);}

/*　カンパニープロフィール　*/
.first_dot { border-top:solid 1px rgba(55,55,55,1.0);}
.table_company { width:100%; text-align:left;}
.table_company th, .table_company td { padding:1em 2em; border-bottom:solid 1px rgba(55,55,55,1.0);}

/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
	
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }