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

/*デフォルトスタイルをリセット*/
*{
	margin: 0; padding: 0;
}

button {
  padding: 0;
  background-color: transparent;
  border: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}




body{
	background:#F5EDD4;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	letter-spacing: 0.05em;
}


/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	.pc{display: none;}
}



/* ------------------------------
コンテンツ
------------------------------ */
.con1{width:840px; margin:0 auto;}
.con2{width:1280px; margin:0 auto;}

/* --------ウィンドウが1280px以下の時-------- */
@media screen and (max-width: 1280px) {
	.con1, .con2{width:840px;}
}

/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	.con1, .con2{width: calc(100% - 40px);}
}


/* ------------------------------
global_header-menu（メインナビゲーション）
------------------------------ */
/* ナビゲーション内容 */
.open #global_header-menu {
	visibility: visible;
	opacity: 1;
	z-index: 99;
	transition: all 1s ease-out .3s;
}
#global_header-menu {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	right: 0;
	height: 310px;
	width: 350px;
	padding-top:50px;
	text-align: center;
	font-size: 22px;
	font-weight:bold;
	
}
#global_header-menu ul{list-style: none;}
#global_header-menu img{width:200px;}
#global_header-menu .menu-tel{font-size: 22px; color: #0073BD; margin-bottom:40px;}
#global_header-menu ul a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 10px 0;
	-webkit-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
#global_header-menu a:hover {color: #DDD;}

/* nav-bg　ナビゲーション背景 */
#nav-bg {
  content: "";
  width: 400px;
  height: 470px;
  margin-right: -70px;
  margin-top: -70px;
  top: 0px;
  right: 0px;
  display: block;
  position: fixed;
  background:#0073BD;
	z-index: 98;
  -webkit-border-radius: 15%;
  border-radius: 15%;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(.02);
  transform: scale(.02);
	transform-origin: top right;
	opacity: 0;
}
.open #nav-bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
	opacity: 1;
}
.nav-bg-top {
	width: 400px;
	height: 200px;
	background: #FFF;
}



/* Toggle Button */
#menu-btn {
    display: block;
	position: fixed;
    right: -10px;
    top: -20px;
    width: 40px;
    height: 40px;
	padding:40px 20px 10px 20px;
    cursor: pointer;
    z-index: 101;
	background:#fff;
	border-radius:20%;
    }

#menu-btn div {
	position: relative;
}


/* #nav-toggle 切り替えアニメーション */
#menu-btn span {
        display: block;
        position: absolute;
        height: 6px;
        width: 30px;
        background: #1A1311;
	border-radius:3px;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
}
#menu-btn span:nth-child(1) {
            top: 0;
            }
#menu-btn span:nth-child(2) {
            top: 11px;
            }
#menu-btn span:nth-child(3) {
            top: 22px;
            }

.open #menu-btn { background: none;}

.open #menu-btn span:nth-child(1) {
                    top: 11px;
                    -webkit-transform: rotate(315deg);
                    -moz-transform: rotate(315deg);
                    transform: rotate(315deg);
                }
.open #menu-btn span:nth-child(2) {
                    width: 0;
                    left: 50%;
                }
.open #menu-btn span:nth-child(3) {
                    top: 11px;
                    -webkit-transform: rotate(-315deg);
                    -moz-transform: rotate(-315deg);
                    transform: rotate(-315deg);
                }

/* お問い合わせページのノートンのマークより上にナビゲーションを重ねる */
#norton-idsafe-field-styling-divId{z-index: 9 !important;}

/* ------------------------------
#main-bisual（トップページ）
------------------------------ */
#main-bisual{
	width:100%;
/*	height: 100vh;*/
	position: relative;
	background: #0073BD;
	display: block;
	display: flex;
	justify-content: space-between;
	overflow-x: hidden;
}
#main-bisual img{
/*	width:50%;*/
}

.main-l-bg{
	background: url("img/main-l-bg.png") no-repeat;
	background-size: auto 100%;
	background-position: center;
	height: 100vh;
	width: 100%;
	animation: fadeIn;
	animation-duration: 1s;
}

.main-bisual-l{
	animation-duration: 1s;
	animation-delay: 1s;
	height: 100vh;
	width: 100%;
	position: relative;
	animation-name: split-l;
	animation-fill-mode: forwards; /*--@keyframesの100%のスタイルを適用--*/
}

@keyframes split-l{
    0%{
        width: 100%;
    }
    100%{
        width: 50%;
		
    }
}


.main-l-copy{
	transform: translate3d(0,0,0); /* カクツキ解消 */
	will-change: transform, animation; /* カクツキ解消 */
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
    bottom: 0;
	margin: auto;
	width: 375px;
	animation: fadeInUpSmall 0s ease-out 0s forwards, tada 0.5s ease-out 0.5s forwards;
	animation-duration: 0.5s; /*アニメーションの長さ */
}
@-webkit-keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpSmall {
  -webkit-animation-name: fadeInUpSmall;
  animation-name: fadeInUpSmall;
}





.main-bisual-r{
	background: url("img/main-r-bg.png") no-repeat, #F5EDD4;
	background-size: cover;
	background-position: center;
	height: 100vh;
	width: 0%;
	position: relative;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-name: split-r;
	animation-fill-mode: forwards; /*--@keyframesの100%のスタイルを適用--*/	
}
@keyframes split-r{
    0%{
        width: 0%;
    }
    100%{
		width: 50%;
    }
}

.main-r-logo{
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
    bottom: 0;
	margin: auto;
	width: 414px;
	opacity: 0;
	animation: fadeIn;
	animation-duration: 2s;
	animation-delay: 1.5s;/* アニメーションを遅らせる */
/*	animation-name: split-r-logo;*/
	animation-fill-mode: forwards; /*--@keyframesの100%のスタイルを適用--*/
	
}

/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	#main-bisual{display: block;}
	.main-bisual-l, .main-bisual-r{animation: none;}
	.main-bisual-r{width: 100%;}
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	.main-l-copy, .main-r-logo{width:200px;}
	
}



/* ------------------------------
#main-bisual（トップページ・２回目以降の表示設定）
------------------------------ */
.save{animation: none !important;}
.twice .main-bisual-r{width:100%;}
.twice .main-r-logo{opacity: 1;}



/* ------------------------------
#intro（トップページ　会社紹介）
------------------------------ */
#intro{padding:130px 0;}
#intro h1{margin-bottom:87px;}
.summary{
	font-size: 24px;
	font-weight: bold;
	line-height:56px;
	letter-spacing: 1.2;
}
#intro .button1{margin:  87px 0 0 0;}

/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	#intro h1 img{width:100%;}
}
/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	.summary{font-size: 16px; line-height:40px;}
}


/* ------------------------------
.button1
------------------------------ */
.button1{
	display: block;
	margin:  87px auto 0;
	width:400px;
	height:56px;
	padding-top: 24px;
	background:#0673BD;
	color:#FFF;
	border-radius: 45px;
	font-size:18px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	transition: all .3s ease;
}
.button1:hover{background: #003F8A;}


/*.button1の背景と文字色を反転*/
.button1-b{
	background:#FFF;
	color:#0673BD;
}
.button1-b:hover{background: #EDEDED;}


/* ------------------------------
.button2
------------------------------ */
.button2{
	display: block;
	margin:  0px auto 0;
	width:500px;
	height:110px;
	padding-top: 74px;
	background:#0673BD;
	color:#FFF;
	border-radius: 45px;
	font-size:24px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	transition: all .3s ease;
}
.button2:hover{background: #003F8A;}

/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	.button1, .button2{width: 100%;}
}
/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	.button2{height:100px; font-size:16px;}
}


/* ------------------------------
.arrow
------------------------------ */
.arrow, .arrow2{position: relative;}

/*白の矢印*/
.arrow::before { 
  content: "";
	background: url("img/arrow.png") no-repeat;
	background-size: cover;
	margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 30px; 
  height: 27px;
}
/*青の矢印*/
.arrow2::before { 
  content: "";
	background: url("img/arrow2.png") no-repeat;
	background-size: cover;
	margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 30px; 
  height: 27px;
}



/* ------------------------------
#intro-service（トップページ　Our Services）
------------------------------ */
#intro-service{
	position: relative;
	background: #E24E43;
	margin: 220px 0;
	padding: 30px 0;
}
#intro-service::before{
	content: "";
	position: absolute;
	background: url("img/redbg-top.svg") no-repeat;
	background-size: cover;
	background-position: center;
	top: -338px;
	width:100%;
	height: 340px;
}
#intro-service::after{
	content: "";
	position: absolute;
	background: url("img/redbg-btm.svg") no-repeat;
	background-size: cover;
	background-position: center;
	bottom: -300px;
	width:100%;
	height: 302px;
}

#intro-service h2{
	font-size: 60px;
	font-weight: bold;
	color: #FFF;
	margin: 0 0 0 200px;
}
#intro-service h2::before{
	content: "";
	display: inline-block;
	background: url("img/icon-w.png") no-repeat;
	width:43px;
	height: 54px;
	background-size: cover;
	margin-right: 10px;
}

.intro-service-wrap{
	display: flex;
	justify-content: center;
	margin:30px 0 0 -150px;
}
.intro-service-wrap-w{color:#FFF; margin:-120px 0 0 150px;}

.intro-service-item1{
	background: url("img/intro-service-item1.svg") no-repeat;
	background-size: cover;
	width:400px;
	height: 425px;
	display: flex;
}
.intro-service-item2{
	background: url("img/intro-service-item2.svg") no-repeat;
	background-size: cover;
	width:400px;
	height: 394px;
	display: flex;
	margin:-60px 0 0 40px;
}
.intro-service-item3{
	background: url("img/intro-service-item3.svg") no-repeat;
	background-size: cover;
	width:400px;
	height: 403px;
	display: flex;
	
}
.intro-service-item4{
	background: url("img/intro-service-item4.svg") no-repeat;
	background-size: cover;
	width:400px;
	height: 480px;
	display: flex;
	margin:-100px 0 0 40px;
}


.intro-service-txt{width:290px; margin: 0 auto; align-self: center;}
.intro-service-txt h3{font-size:32px; font-weight: bold; line-height:1.5;}
.intro-service-txt p{font-size:16px; line-height:1.8; letter-spacing: 0.8px;}
.intro-service-item2 .intro-service-txt{margin-top:-50px;}


/* --------ウィンドウが1280px以下の時-------- */
@media screen and (max-width: 1280px) {
	#intro-service h2{
		margin: 0 0 0px;
	}
	.intro-service-wrap-w{margin:-40px 0 0 0px;}
	
}

/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	#intro-service h2{
		font-size: 32px;
		margin: 0 0 0px;
		background-size:30px;
	}
	#intro-service h2::before{
		position: relative;
		top:15px;
	}
	.intro-service-wrap{display: block; margin: 80px auto 0px;}
	.intro-service-wrap-w{margin:-100px 0 0 0px;}
	
	.intro-service-item1, .intro-service-item2,
	.intro-service-item3, .intro-service-item4{
		background-size: contain;
		width: 100%;
		background-position: center;
	}
	.intro-service-item2{margin:-60px 0 0 0px;}
	.intro-service-item4{margin:-80px 0 0 0px;}
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	#intro-service{margin: 100px 0 200px 0;}
	#intro-service h2{text-align: center;}
	
	
	.intro-service-wrap-w{margin:-60px 0 0 0px;}
	.intro-service-item4{margin:-30px 0 0 0px;}
	
	.intro-service-item1, .intro-service-item2,
	.intro-service-item3, .intro-service-item4{
		height:400px;
	}
}




/* ------------------------------
#subtop（サブページ）
------------------------------ */
#sub-top{
	background: url("img/header-bg.png") no-repeat;
	background-position: top;
	background-size: contain;
	padding-top: 250px;
	position: relative;
}
#sub-top .contact-txt{margin-bottom: 60px; text-align: left;}

.sub-top-logo{
	position: absolute;
	width: 180px;
	top:26px;
	left:26px;
}

/* --------ウィンドウが1280px以下の時-------- */
@media screen and (max-width: 1280px) {
	#sub-top{background-size: contain;}
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	#sub-top{padding-top: 100px;}
	.sub-top-logo{width: 100px; top:15px; left:15px;}
}


/* ------------------------------
#company（aboutページ　Company Profile / contactページ）
------------------------------ */
#company{
	position: relative;
	background: #F7A50E;
	margin: 320px 0;
	padding: 50px 0;
}
#company::before{
	content: "";
	position: absolute;
	background: url("img/yellowbg-top.svg") no-repeat;
	background-size: cover;
	background-position: center;
	top: -338px;
	width:100%;
	height: 340px;
}
#company::after{
	content: "";
	position: absolute;
	background: url("img/yellowbg-btm.svg") no-repeat;
	background-size: cover;
	background-position: center;
	bottom: -300px;
	width:100%;
	height: 302px;
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	#company{margin: 200px 0 200px 0;}
}


/* ------------------------------
h2（黒字）
------------------------------ */
.h2-b{
	font-size: 60px;
	font-weight: bold;
	color: #000;
	margin: 0 0 54px 0px;
}
.h2-b::before{
	content: "";
	display: inline-block;
	background: url("img/icon-b.png") no-repeat;
	width:43px;
	height: 54px;
	background-size: cover;
	margin-right: 10px;
}

/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	.h2-b{
		font-size: 32px;
		text-align: center;
		background-size:30px;
	}
	.h2-b::before{
		position: relative;
		top:15px;
	}
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	.contact .h2-b{font-size: 26px;}
}

/* ------------------------------
h3
------------------------------ */
h3{font-size: 32px; font-weight: bold; margin:20px 0;}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	h3{font-size: 24px;}
}


/* ------------------------------
h4
------------------------------ */
h4{font-size: 22px; font-weight: bold; margin:20px 0;}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	h4{font-size: 20px;}
}



/* ------------------------------
.table1（aboutページ　Company Profile）
------------------------------ */
table{
	border-collapse: collapse;
	width: 100%;
}

.table1 {border-top: solid 1px #707070; font-size: 18px;}
.table1 th,
.table1 td{
	padding: 20px;
	border-bottom: solid 1px #707070;
	box-sizing:border-box;
}
.table1 th {
	width: 20%;
	font-weight: bold;
	text-align: left;
}


/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	.table1 th,
	.table1 td {
		display: block;
		width: 100%;
	}
	.table1 th{
		border-bottom: none;
		padding: 20px 0 10px 20px;
	}
	.table1 td{
		padding: 0px 0 20px 40px;
	}
}


/* ------------------------------
#greetings（aboutページ　代表者挨拶）
------------------------------ */
#greetings{
	font-size: 18px;
	line-height: 36px;
	margin-bottom: 200px;
}
#greetings p{
	margin-bottom: 42px;
}

.ceo{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.ceo p{text-align: right; margin-right: 40px;}
.ceo img{width:180px;}
.ceo span{
	display: block;
	font-size: 24px;
}


/* ------------------------------
#service（serviceページ　Our Services）
------------------------------ */
#service{margin-bottom: 200px;}
.sub-top-service{padding-bottom: 150px;}

.service-item{
	display: flex;
	justify-content: space-between;	
}
.service-item:not(:first-child){margin-top: 150px;}

.service-item:nth-child(even){flex-direction: row-reverse;}

.service-item-txt{margin-left:40px;}
.service-item:nth-child(even) .service-item-txt{margin: 0 40px 0 0;}

.service-item-txt ul{margin-bottom: 30px; list-style-position: inside;}
.service-item-txt li{
	font-size: 18px;
	font-weight: bold;
	line-height: 36px;
}
.service-item-txt p{font-size: 16px; line-height: 32px;}

.example{margin-top: 20px;}
.example span{font-weight: bold; margin-bottom:5px;}
.example a{color:#0673BD; transition: all .3s ease}
.example a:hover{color: #003F8A;}

/* --------ウィンドウが1280px以下の時-------- */
@media screen and (max-width: 1280px) {
	.service-item{display: block;}
	.service-item img{width: 100%;}
	.service-item-txt{margin-left:0px;}
	.service-item:nth-child(even) .service-item-txt{margin: 0 0px 0 0;}
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	.service-item:not(:first-child){margin-top: 100px;}
	.service-item-txt li{font-size: 16px; padding-left: 1.5em; text-indent: -1.5em;}
}


/* ------------------------------
.contact
------------------------------ */
.contact{margin: 250px 0 200px 0 !important; padding:0 !important;}


input, textarea {
	margin: 0;
	padding: 0;
	background: #FFF;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 18px;
}

::placeholder {
	color: #9A9A9A;
	font-weight:normal !important;
}

.form-item{
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #707070; 
	padding: 11.5px 0 11.5px 20px;
	font-size:18px;
}
.form-item:last-of-type{border-bottom: 1px solid #707070;}

.label{
	font-weight:bold;
	width: 100%;
	max-width:150px;
	margin-top: 14px;
}
.form-item-input{
	width: calc(100% - 40px);
	max-width:620px;
	height:40px;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
}
.form-item-textarea{
	width: calc(100% - 40px);
	max-width:620px;
	height:260px;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	resize: vertical; /* 縦方向のリサイズを許可 */
}


.form-btn{
	margin-top: 60px;
	height:80px;
	padding-top:0;
	letter-spacing: 0.9px;
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	.contact{margin: 150px 0 200px 0 !important;}
	.form-item{display: block; padding: 11.5px 0 11.5px 0px;}
	.label{margin: 0 0 10px 0;}
}




/* ------------------------------
footer
------------------------------ */
footer{
	height: auto;
	padding-top:64.8%;
	background: url("img/footer-bg.png") no-repeat;
	background-position: bottom;
	background-size: contain;
	margin-top:-50px;
	position: relative;
	transition: all .1s ease-out;
}

footer .con1{
	position:absolute;
	top:30%;
	left:50%;
	transform: translate(-50%, -50%);
}


.footer-logo{
	display: block;
	width: 400px;
	margin: 0 auto;
	padding-top: 100px;
}

.contact-txt{font-size:60px; font-weight: bold; line-height:1.5;}

.contact-add{
	display: flex;
	margin-top:45px;
}
.contact-add div{margin:50px 40px 0px 0;}
.contact-add p{font-size:22px; font-weight:bold;}
.contact-add p:last-child{font-size:46px; font-weight:bold; color:#0673BD;}

.contact-add2{display: block; margin-top:0; text-align: center;}
.contact-add2 div{margin:50px 0px 0px 0;}

.copyright{
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	position: absolute;
	bottom:15%;
	left: 0;
	right: 0;
	margin: auto;
	width: 190px;
}

/* --------ウィンドウが1280px以上の時-------- */
@media screen and (min-width: 1280px) {
	footer.short{padding-top:60%; margin-top: -100px;}
}


/* --------ウィンドウが840px以下の時-------- */
@media screen and (max-width: 840px) {
	footer{padding-top:83%;}
	footer.short{padding-top:70%;}
	.contact-txt{font-size:30px; text-align: center;}
	.contact-add{display: block; text-align: center;}
	
	.contact-add div{margin:50px 0px 30px 0;}
	.contact-add p{font-size:20px;}
	.contact-add p:last-child{font-size:30px;}
	
	.copyright{bottom:60px;}
}

/* --------ウィンドウが420px以下の時-------- */
@media screen and (max-width: 420px) {
	footer{padding-top:180%;}
	footer.short{padding-top:100%;}
	footer .con1{top:40%;}
	footer.short .con1{top:20%;}
	
	.footer-logo{width: 280px;}
	.contact-txt{font-size:22px;}
	.copyright{bottom:40px;}
	
}