@charset "utf-8";

/************************************************
■フォント
*************************************************/
@font-face {
	font-family: 'font-r';
	src:url('../../common/font/Montserrat-Regular.woff') format('woff');
    font-weight:700;
    font-style: normal;
    -ms-font-feature-settings: "normal";
}
@font-face {
	font-family: 'font-sb';
	src:url('../../common/font/Montserrat-SemiBold.woff') format('woff');
    font-weight:700;
    font-style: normal;
    -ms-font-feature-settings: "normal";
}
@font-face {
	font-family: 'font-b';
	src:url('../../common/font/Montserrat-ExtraBold.woff') format('woff');
    font-weight:700;
    font-style: normal;
    -ms-font-feature-settings: "normal";
}

.font-r {
	font-family: 'font-r';
}
.font-sb {
	font-family: 'font-sb';
}
.font-b {
	font-family: 'font-b';
}

/************************************************
■基本パーツ
*************************************************/

a:focus, *:focus {
    outline:none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:bold;
    color:#333333;
}

/* リンク色指定 */
a:link {
    color:#4c45ff;
    text-decoration: none;
}
a:link:hover ,
a[href]:hover {
    text-decoration: none;
}


/************************************************
■ヘッダ
*************************************************/
html {
	height:100%;
}
body {
    font-family: Helvetica, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
	  -webkit-text-size-adjust: none;
	  -webkit-font-smoothing: antialiased;
    position:relative;
	height:100%;
}

#screen {
    mix-blend-mode:color;
    transition:all 8s;
	height:100%;
    background:#00071C;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:5;
}

.container {
	height:100%;
}
.main {
}

h1 {
    transition:all 6s;
	font-size:1.8em;
	padding-bottom:1em;
    opacity:0;
}
p {
	font-size:1.2em;
	padding-bottom:1em;
	line-height:1.8;
}


/************************************************
■トップページ
*************************************************/
.main_box {
    transition:all 8s;
    background-color:#000;
    background-image:url("/common/img/photo1.jpg");
    background-repeat:no-repeat;
    background-size:cover;
	background-position:50% bottom;
	min-height:50em;
    opacity:0;
}
.main header {
	padding:2em 3em;
}
.main header h2 {
	font-size:1.4em;
	color:#fff;
}
.main header p {
	font-size:0.8em;
	color:#fff;
	letter-spacing:0.15em;
}
.main_box h1 {
    transition:all 2s;
	font-weight:normal;
	font-size:2.8em;
	width:5.5em;
    height:10em;
	line-height:1.8;
	letter-spacing:0.05em;
	vertical-align:middle;
	position:relative;
	right:0;
	left:0;
	display:block;
	margin:0 auto;
	color:#fff;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-shadow:#000 0 1px 2px;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.main_box h1 .num {
	-ms-text-combine-horizontal: all;
	-webkit-text-combine: horizontal;
	text-combine-upright: all;
	line-height: 1;
	vertical-align: baseline;
	font-size:1.1em;
}
#main_message {
	background:#000;
	text-align:center;
    padding-bottom:3em;
}
#main_message img {
    transition:all 2s;
    opacity:0;
}
#main_message p {
    transition:all 2s;
	margin-top:2em;
	color:#E8C274;
    opacity:0;
}

/*▼セクション*/
section {
	margin-top:3em;
	position:relative;
}

#business {
}
#business .panel1 {
	margin:1em 0 0 4em;
	width:45%;
	padding:4em;
    background:linear-gradient(#AECEEE, #D7D7FB);
}
#business .panel2 {
	width:50%;
	height:80%;
	position:absolute;
	top:2em;
	right:4em;
    background-image:url("/common/img/photo2.jpg");
    background-repeat:no-repeat;
    background-size:cover;
	background-position:50% top;
	/*box-shadow:rgba(0,0,0,0.3) 0px 10px 15px;*/
}

/*▼セクション内タイトル：左*/
.section_title::before {
    content: "";
	display:inline-block;
    width:5em;
    transform: rotate(45deg);
	position:absolute;
	top:1.5em;
	left:-1em;
}
.section_title {
	padding:4em 0 0 4em;
}
.section_title h2 {
	font-size:1.8em;
	line-height:1.2;
}
.section_title p {
	font-family: 'font-sb';
	font-size:1.2em;
	letter-spacing:0.15em;
}

#business .section_title::before {
    border-top:#ACCFE8 3px solid;
}
#news .section_title::before {
    border-top:#EFC484 3px solid;
}

#business .section_title p {
    color:#ACCFE8;
}
#news .section_title p {
    color:#EFC484;
}

/*▼セクション内タイトル：右*/
.section_title_r::before {
    content: "";
	display:inline-block;
    width:4.5em;
    transform: rotate(-45deg);
	position:relative;
	top:-2em;
	right:-5em;
}
.section_title_r {
	padding:4em 4em 0 0;
	text-align:right;
	overflow: hidden;
}
.section_title_r h2 {
	font-size:1.8em;
	line-height:1.2;
}
.section_title_r p {
	font-family: 'font-sb';
	font-size:1.2em;
	letter-spacing:0.15em;
}

#info .section_title_r::before {
    border-top:#ACDFE2 3px solid;
}
#info .section_title_r p {
    color:#ACDFE2;
}


/*▼セクション内パーツ*/
#business .panel1 .icon1 {
	display:inline-block;
	width:70%;
	margin:0 auto;
	text-align:center;
}
#business .panel1 .icon2 {
	display:inline-block;
	width:35%;
	margin:0 auto;
	text-align:center;
}
#business .panel1 .icon3 {
	display:inline-block;
	width:35%;
	margin:0 auto;
	text-align:center;
}
#business .panel1 .inner {
	display:inline-block;
}
.icon_bg {
	display:flex;
    justify-content: center;
    align-items: center; /*縦中央*/
	width:10em;
	height:10em;
	vertical-align:middle;
	background:#fff;
	text-align:center;
	border-radius:100em;
}
.icon_bg img {
	vertical-align:middle;
}
#business .panel1 .inner p {
	color:#637889;
	font-weight:normal;
	padding-top:0.5em;
	font-size:1.4em;
}

/*▼お知らせ*/
.list-news {
	width:70%;
	position:absolute;
	top:4em;
	right:4em;
}
.list-news dl {
	display:flex;
	width:80%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.list-news dl dt {
	width:9em;
	font-size:1.2em;
	padding:0.5em;
	color:#999;
}
.list-news dl dd {
	font-size:1.2em;
	padding:0.5em;
}

/*▼会社概要*/
#info .panel1 {
	display:block;
	width:68%;
	height:35em;
	margin:-7em 0 0 4em;
    background-image:url("/common/img/photo3.jpg");
    background-repeat:no-repeat;
    background-size:cover;
	background-position:right 50%;
}
#info .panel2 {
	margin:1em 0 0 4em;
	width:24%;
	padding:3em;
	position:absolute;
	top:10em;
	right:4em;
    background:linear-gradient(#ACDFE2, #DAFFEE);
	color:#6E8182;
}
#info .panel2 h5 {
	font-size:1.2em;
	font-weight:normal;
	color:#6E8182;
}
ul.normal {
	font-size:1.2em;
	margin-bottom:1em;
}
ul.disc {
	padding-left:2em;
}
ul.disc li {
	font-size:1.1em;
	list-style-type:disc;
}

/*▼マップ*/
#map_canvas {
    margin:2em 0;
	width:100%;
	height:40em;
    /*! border-top:#ddd 1px solid; */
    /*! border-bottom:#ddd 1px solid; */
}

/*▼住所*/
.address {
	display:flex;
    align-items: center; /*縦中央*/
	width:50em;
	margin:2em auto;
}
.address > div {
	padding:0 4em;
}
.address .column_l {
	border-right:#ddd 1px solid;
}

footer {
	margin:5em 0;
    border-top:#ddd 1px solid;
}
footer p {
	padding-top:4em;
	text-align:center;
	font-size:0.9em;
	color:#999;
}