:root {
--point-color-green: #04b321;
--point-color-red: #F74460;
--point-color-blue: #5FDB5F;
--txt-color: #333;
--head-color: rgba(255,255,255,.8);
--content-padding: 120px 0;
--base-color: #eee;
}


/*COMMON*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/* CSS Document */

body{
	margin: 0;
	padding: 0;
	position: relative;
	background-color: rgba(255,255,255,1.00);
  font-family: "Noto Sans JP", sans-serif;
	color: #505050;
	letter-spacing: .05em;
	
	transition: all .4s ease-in-out;
}
body.is-change0{
	background: #242424;
}
body.is-change{
	background: rgba(232,232,232,1.00);
}
body.is-change2{
	background: #242424;
}
body.is-change3{
	background: #242424;
}

#wrap{
	position: relative;
	width:100%;
	height: 100%;
	overflow: hidden;
	left: 0;
	
	padding: 115px 30px 100px;
}
.bgColor{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:url("../images/bg_color.png") no-repeat center top;
	background-size: 100% auto;
	mix-blend-mode: overlay;
	z-index: 0;
}

.scrltxt{
	position: absolute;
	top: 0;
	left: -40px;
	font-size: 140px;
	white-space: nowrap;
	mix-blend-mode: overlay;
	z-index: 0;
	opacity: .3;
}
.scrltxt2{
	position: absolute;
	top: 0;
	right: -50px;
	font-size: 140px;
	white-space: nowrap;
	mix-blend-mode: overlay;
	z-index: 0;
	opacity: .3;
}
.rotate{
	margin: 0;
	padding: 0;
}
.rotate ul{
	height: 100%;
}
.rotate li{
	writing-mode: vertical-lr;
	color: #000;
	font-weight: bold;
	font-family: "Albert Sans", sans-serif;
	letter-spacing: .05em;
}


.bodytxt{
	position: relative;
	z-index: 2;
}

.sq1{
	position: absolute;
	width: 1000px;
	height: 1000px;
	background: #fff;
	mix-blend-mode: overlay;
	transform: rotate(45deg) translateX(-50%);
	transform-origin:0 0;
	top: 10px;
	left: 0;
	opacity: .2;
}

.sq2{
	position: absolute;
	width: 1000px;
	height: 1000px;
	background: #fff;
	mix-blend-mode: overlay;
	transform: rotate(45deg) translateX(40%);
	transform-origin:0 0;
	top: 400px;
	left: 100%;
	opacity: .2;
}

.light1{
	position: absolute;
	width: 700px;
	height: 700px;
	background: radial-gradient(at 50% 50%, rgba(255,255,255,1) 0, rgba(255,255,255,0) 50%);
	top: 0;
	left: 100%;
	transform: translate(-70%,-30%);
	opacity: 1;


}



/* ----- -----*/

#promotion{
	width: 100vw;
	height: 70vh;
	position: relative;
}
#promotion .logo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-20%) scale(1);
	animation:logo_anim .7s ease-in-out forwards 2.6s;
	opacity: 0;
	

}
#promotion .logo img{
	width:13vw;
	height: auto;
}



@keyframes logo_anim {
	0% {
		opacity: 0;
		transform: translate(-50%,-10%) scale(1);
	}
	100% {
		opacity: 1;
		transform: translate(-50%,-50%) scale(1);
	}
}


/*========= 1文字ずつ出現させるためのCSS ===============*/





/*header*/


header .logo{
	position: absolute;
	left: 45px;
	top: 40px;
}


header.header .logo img{
	width: auto;
	height: 40px;
}



header.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
    z-index: 10;
	
	height: 115px;
	
	background: rgba(255,255,255,0);
}
header.header nav {
    position: fixed;
    top: 0;
}

header.header nav .headerCont{
    display: none;
	background: rgba(255,255,255,1);
    width: 100vw;
	height: 100vh;
	
	position: relative;
}

header.header nav ul {
    /*最初はナビゲーションボタンは非表示*/
    list-style:none;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
header.header nav li a{
    padding: 30px;
    font-size: 30px;
    display: block;
    text-align: center;
    text-decoration: none;
	color: #0000E6;
	
	font-weight: bold;
}


.hamburger {
    position: absolute;
    top: 40px;
    right:46px;
    cursor: pointer;
    width: 42px;
    height: 36px;
    z-index: 10;
	transition: all .3s ease-in-out;
}
/*.hamburger:hover{
	transform:rotate(180deg) scale(1.5);
}
*/

.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #0000E6;
    width:100%;
    z-index: 10;
	border-radius: 3px;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 17px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 30px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 12px;
    transform: translateY(6px) rotate(-33deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 24px;
    transform: translateY(-6px) rotate(33deg);
}




footer{
	padding: 100px 100px 100px;
	background: #fff;
	
	z-index: 1;
	text-align: center;
	
	font-size: 12px;
	
	color: #0000E6;
	
}




.pc{
	display: block
}
.sp{
	display: none
}

@media screen and (max-width: 768px) {

	.pc{
		display: none
	}
	.sp{
		display: block
	}

	

	#wrap{
		position: relative;
		width:100%;
		height: 100%;
		overflow: hidden;
		left: 0;

		padding: 86px 10px 40px;
	}

	.bgColor{
		background:url("../images/bg_color_sp.png?v=003") no-repeat center top;
		background-size: 100% 100%;
	}

	.scrltxt{
		left: -20px;
		font-size: 70px;
	}
	.scrltxt2{
		right: -25px;
		font-size: 70px;
	}
	.rotate ul{
		height: 100%;
	}

	.sq1{
		width: 500px;
		height: 500px;
		transform: rotate(45deg) translateX(-50%);
		top: 10px;
		left: 0;

	}

	.sq2{
		width: 500px;
		height: 500px;
		transform: rotate(45deg) translateX(40%);
		top: 400px;
		left: 100%;
	}

	.light1{
		width: 300px;
		height: 300px;
		transform: translate(-70%,-30%);
	}



	/* ----- -----*/

	#promotion{
		width: 100vw;
		height: 70vh;
	}
	#promotion .logo img{
		width:28vw;
		height: auto;
	}


	/*========= 1文字ずつ出現させるためのCSS ===============*/

	.promoCatch div span{
		margin-right: 2px;
		font-size: 38px;
	}
	.promoCatch {
		padding-left: 5px;
		margin-bottom: 10px;
	}

	.promoCatch div.h2Bold{
		padding-right: 0;
		margin-bottom: 10px;
	}

	.promoCatch div.h2Bold,
	.promoCatch div.h2Light{
		opacity: 0;
	}
	.promoCatch div.h2Bold.appeartext,
	.promoCatch div.h2Light.appeartext{
		opacity: 1;
	}


	.homeRead p{
		font-size: 16px;
		line-height: 30px;
	}


	h3{
		font-size: 13px;
		padding: 5px 20px;
	}


	.contTitle.titleConcept{
		padding: 50px 0;
		margin-bottom: 10px
	}


	#concept.contWrap{
		padding: 0 0 120px 0;
	}


	#profile.contWrap{
		padding: 70px 0 70px 0;
	}
	#employee.contWrap{
		padding: 70px 0 70px 0;
	}
	#service.contWrap{
		padding: 20px 0 70px 0;
	}


	#profile .content{
		width:94%;
	}
	#employee .content{
		width:94%;
	}


	.profileL{
		width: 100%;
	}
	.profileR{
		width: 100%;
	}

	.contTitle.titleProfile{
		margin-bottom: 30px
	}
	.profileChart dt{
		width:100%;
		border-top: 1px solid rgba(0,0,0,.2);
		padding: 18px 0 0;
		font-size: 12px;
	}
	.profileChart dd{
		width: 100%;
		border-top: none;
		padding: 8px 0 18px;
		font-size: 12px;
		line-height: 180%;
	}



	body.is-change .profileChart dt{
		color: #666;
		border-top: 1px solid rgba(0,0,0,.2);
	}
	body.is-change .profileChart dd{
		color: #666;
		border-top: none;
	}

	body.is-change0 .profileChart dt{
		color: #fff;
		border-top: 1px solid rgba(255,255,255,.2);
	}

	body.is-change0 .profileChart dd{
		color: #fff;
		border-top: none;
	}

	
	body.is-change2 .profileChart dt{
		color: #fff;
		border-top: 1px solid rgba(255,255,255,.2);
	}
	body.is-change2 .profileChart dd{
		color: #fff;
		border-top: none;
	}


	.profileMap{
		margin: 30px 0 0 0;
	}
	.profileMap img{
		width: 100%;
		height: auto;

	}

	.profileChart dd a.gmap{
		display: inline-block;
		border-radius: 20px;
		color: #fff;
		font-size: 10px;
		padding: 4px 12px 4px 22px;
		line-height: 100%;
		vertical-align: middle;
		margin-left: 7px;
		margin-top: -7px;
		background: #3075b6 url("../images/gmap_icon.png") no-repeat left 10px center;
		background-size: auto 9px;
	}



		/**/
	
	#service{
		position: relative;
	}
	
	#service::before{
		content: "";
		position: absolute;
		background: url("../images/service_bg.png") no-repeat top 0 left -38vw;
		background-size: 133% auto;
		width: 100%;
		height: 100%;
		top: -27vw;
		left: 0;
		display: block;
		z-index: -1;
		opacity:1;
	}



	.serviceTop{
		display: flex;
		flex-wrap: wrap;
		width: 94%;
		margin: 0 auto;
		justify-content: space-between;
		min-width: 94%;
	}


	.serviceImg01{
		width:48%;
		padding-top: 30px;
		margin: 0;
	}
	.serviceImg02{
		width:48%;
		margin: 0;
	}

	.serviceImg01 img,
	.serviceImg02 img{
		width: 100%;
		height: auto;
	}


	.contTitle.titleBusiness h3{
		position: relative;
		z-index: 1;
		background: linear-gradient(45deg, #2167AC, #660084);
		color: #fff;
		margin-bottom: 30px;
	}

	.serviceTxt{
		width:100%;
		font-size: 13px;
		font-weight: 500;
		line-height: 200%;
		margin-top: 20px
	}


	.serviceBtm{
		padding: 10vw 3vw 4vw;
		display: block;
		flex-wrap: wrap;
		justify-content:flex-start;
		gap:60px 5%;
		min-width: 100%;
	}
	.serviceBox{
		width: 100%;
		position: relative;
		margin-bottom: 30px
	}
	.serviceBox::after{
		content: "";
		position: absolute;
		width: 3px;
		height: 100%;
		background: #D4C7EC;
		top:6px;
		left:10px;
		z-index: 1;

	}
	.serviceNo{
		margin-bottom: 20px;
		position: relative;
	}
	.serviceNo span{
		font-family: "Albert Sans", sans-serif;
		font-optical-sizing: auto;
		font-weight: bold;
		font-size: 8px;
		letter-spacing: .2em;
		line-height: 100%;
		padding: 6px 10px 6px 23px;
		display: inline-block;
		position: relative;
		z-index: 1;
		background: linear-gradient(45deg, #2167AC, #660084);
		color: #fff;
	}

	.serviceTitle{
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 10px;
		line-height: 140%;
		padding-left: 23px;
	}

	.serviceBoxtxt{
		font-size: 11px;
		line-height: 170%;
		font-weight: normal;
		padding-left: 23px;
	}


	body.is-change0 .serviceTxt,
	body.is-change0 .serviceTitle,
	body.is-change0 .serviceBoxtxt{
		color: #fff;
	}


	
	/**/
	header{
		padding: 25px 15px 0 0 ;
	}


	.hMenu{
		gap: 10px;
	}
	.hMenu li{

	}


	.hMenu li a {
	  font-size: 12px;
	  padding: 1px 0 2px;
	}
	.hMenu li a:hover {
		background: none;
		color: #464646;
	}






	footer{
		padding: 50px 30px;
	}

	.footerArea{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.footerArea .footerL{
		width: 100%;
		margin-bottom: 30px
	}

	.footerArea .footerL .logof{
		margin-bottom: 10px;
	}
	.footerArea .footerL .logof img{
		width: 50px;
		height: auto;
	}
	.footerArea .footerL .logoTxt1{
		font-size: 8px;
		margin-bottom: 20px;
	}
	.footerArea .footerL .logoTxt2{
		font-size: 10px;
		line-height: 160%;

	}




	.footerArea .footerR{
		width: 100%;
	}

	.fMenu{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 20px;
	}
	.fMenu li{
		width: 100%;
		margin-bottom: 0;
	}
	.fMenu li a{
		text-decoration: none;
		color: #464646;
		font-weight: bold;
		font-size: 14px;
	}





	#sustainability{
		padding: 0 0 70px;
		text-align: center;
	}

	#sustainability a.susBtn{
		position: relative;
		display: inline-block;
		padding: 30px 70px ;
		background: #fff;
		text-decoration: none;
		color: #000;
		border-radius: 80px;
		font-size: 15px;
		cursor: pointer;
	}
	#sustainability a.susBtn::before{
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translateY(-50%);
		content: "";
		background: url("../images/modal_icon.png") no-repeat 0 0;
		background-size: cover;
		width: 16px;
		height: 16px;
		

	}




	.modalScroll,
	.ScrollContent {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}

	.modal {
	  display: none;
	  height: 100vh;
	  position: fixed;
	  top: 0;
	  width: 100%;
		z-index: 10;
	}
	.modal_bg {
	  background: rgba(0, 0, 0, 0.32);
	  height: 100vh;
	  position: absolute;
	  width: 100%;
	}

	.js-modal-close {
	  color: #555;
	}

	.modalScroll {
	  width: 90%;
		height: 470px;
	  max-height: 600px;
	  padding: 40px 14px 20px 14px;
	  border-radius: 20px;
		background: #fff url("../images/sustainability_bg.jpg?v=00008") no-repeat 0 0;
		background-size: auto 100%;
	}
	.ScrollContent {
	  overflow-y: scroll;
	  height: 430px;
	  width: 100%;
	  border-radius: 20px;
	}
	::-webkit-scrollbar {
	  border-radius: 10px;
	  width: 10px;
	}
	::-webkit-scrollbar-thumb {
	  background-color: #b6b6b6;
	  border-radius: 10px;
	}

	.modal_content {
	  color: rgb(49, 49, 49);
	  text-align: left;
	  padding: 30px 30px 0 30px;
		line-height: 120%;
	}

	.modalclose{
		position: absolute;
		right: 0;
		top: 10px;
		width: 30px;
		height: 30px;
		cursor: pointer;
	}
	.modalclose img{
		width: 100%;
		height: auto
	}


	.susTitle{
		font-size: 22px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}



	.susTxt{
		font-size: 12px;
		margin-bottom: 20px;
		line-height: 150%;
	}



	ol.susList{
		font-size: 12px;
		margin-left: 1.2em;
	}
	ol.susList li{
		list-style-type: decimal;
		margin-bottom: 7px;
		line-height: 150%;
	}




	/*header*/



	header .logo{
		position: absolute;
		left: 25px;
		top: 30px;
	}


	header.header .logo img{
		width: auto;
		height: 25px;
	}



	header.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;

		height: 85px;
	}
	header.header nav {
		position: fixed;
		top: 0;
	}

	header.header nav .headerCont{
		display: none;
		background: rgba(255,255,255,.95);
		width: 100vw;
		height: 100vh;

		position: relative;
	}

	header.header nav ul {
		/*最初はナビゲーションボタンは非表示*/
		list-style:none;

		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0,-50%);
		width: 100%;
	}
	header.header nav li a{
		padding: 30px;
		font-size: 20px;
		display: block;
		text-align: center;
		text-decoration: none;
		color: #0000E6;

		font-weight: bold;
	}


	.hamburger {
		position: absolute;
		right:25px;
		top: 30px;
		cursor: pointer;
		width: 28px;
		height: 25px;
		z-index: 10;
	}
	.hamburger:hover{
		transform:rotate(0) scale(1);
	}
	.hamburger span {
		/*3本の線を作る*/
		transition: all .3s;
		position: absolute;
		height: 2px;
		background-color: #0000E6;
		width:100%;
		z-index: 10;
	}
	.hamburger span:nth-of-type(1) {
		/*上の線の位置*/
		top:3px;
	}
	.hamburger span:nth-of-type(2) {
		/*真ん中の線の位置*/
		top: 12px;
	}
	.hamburger span:nth-of-type(3) {
		/*下の線の位置*/
		top: 21px;
	}
	.hamburger.open span:nth-of-type(1) {
		/*openのとき、上の線を右斜めにする*/
		top: 6px;
		transform: translateY(6px) rotate(-33deg);
	}
	.hamburger.open span:nth-of-type(2) {
		/*真ん中の線を消す*/
		opacity: 0;
	}
	.hamburger.open span:nth-of-type(3) {
		/*下の線を左斜めにする*/
		top: 18px;
		transform: translateY(-6px) rotate(33deg);
	}



}




.opening{
	width: 100vw;
	height: 100%;
	background:#fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	
	animation:opening .7s ease-out forwards 1.5s;
	
	opacity: 1;
	pointer-events: none;
	transform: scale(1);
}


.opening .openLogo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%,-50%) scale(1);
	width:13vw;
	height: 6.5vw;

	-webkit-mask-image: url(/images/logo.svg);
	mask-image: url(/images/logo.svg);
	
	/* 縦横比は保持して領域全体を覆う */
	-webkit-mask-size: cover;
	mask-size: cover;

	/* 表示幅をマスク画像のサイズより大きく指定 */
	max-width: 500px;
	background: linear-gradient(60deg, #003b57 0,#003b57 50%,#55a1ff 75%,#003b57 95%, #003b57 100%);
	background-size: 300% 100%;
	animation:logo_mask .8s ease-out forwards .5s;
	opacity: 0;

}


@keyframes opening {
	0% {
		opacity: 1;
		pointer-events: none;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		pointer-events: auto !important;
		transform: scale(1);
	}
}


@keyframes logo_mask {
	0% {
		opacity: 0;
		transform: translate(-30%,-50%);
		background-position: 200% 0%;
	}
	30% {
		background-position: 200% 0%;
	}
	60% {
		transform: translate(-50%,-50%);
	}
	100% {
		opacity: 1;
		transform: translate(-50%,-50%);
		background-position: -10% 0%;
	}
}


@media screen and (max-width: 768px) {
	.opening .openLogo{
		width: 28vw;
		height: 14vw;

	}


}






.masonry-grid {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 50px;

}
.masonry-grid img{
        width: 100%;
        height: auto;
}


.galleryDetail{
	width: 100vw;
	height: 100vh;
	z-index: 20;
	background: rgba(255,255,255,1);
	pointer-events: none;
	
	position: fixed;
	top: 0;
	left: 0;
	
	
}
.galleryDetail .glaleryImg {
	position: absolute;
	width: 85vw;
	height: 80vh;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.galleryDetail .glaleryImg img{
	object-fit: contain;
	object-position: 50% 50%;
	width:100%;
	height:100%;
	background: rgba(255,255,255,.0);
	/*box-shadow: 0 0 30px rgba(0,0,110,.1);*/
}
.galleryDetail .glaleryImg video{
	object-fit: contain;
	object-position: 50% 50%;
	width:100%;
	height:auto;
	background: rgba(255,255,255,.0);
	/*box-shadow: 0 0 30px rgba(0,0,110,.1);*/
	
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	
}



.close{
	position: fixed;
	top: 9vh;
	right: 9vw;
	z-index: 21;
	display: block;
	
	
}
.close div{
	width: 60px;
	height: 60px;
	cursor: pointer;
	transition: all .3s ease-in-out;
}
.close div:hover{
	/*transform: rotate(180deg) scale(1.5);*/
}
.close div::before{
	content: "";
	position: absolute;
	width: 50px;
	height: 2px;
	border-radius: 3px;
	background: #0000e6;

	top: 50%;
	left: 50%;
	
	transform: translate(-50%,-50%) rotate(45deg);
}
.close div::after{
	content: "";
	position: absolute;
	width: 50px;
	height: 2px;
	border-radius: 3px;

	background: #0000e6;

	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(-45deg);
}




#infscr-loading { 
    text-align: center;
    z-index: 100;
    position: fixed;
    bottom: 60px;
    width: 100%;
    padding: 10px 0;
    background: #fff; 
    opacity: 0.8;
    color: #666;
}
#gallery{padding: 0 0 100px; width: 100%;}
.gallery{float: left; width: 20%;}
.gallery img{width: 100%; height: auto;}
.navigation{width: 100%; clear: both; background-color: #ccc; padding: 20px; text-align: center;}
.navigation a{color: #fff; text-decoration: none;}






/*OTHER CONT*/


#otherCont{
	max-width: 800px;
	margin: 0 auto;
	padding: 150px 0 100px 0;
}

#otherTop{
	
}

#otherTop section{
	
}

.contTitle{
	margin-bottom: 40px;
}
h2.contTitle {
	color: #0000E6;
	font-size: 3em;
	text-align: center;
}





#otherDetail{
	
}

#otherDetail section{
	
}


.aboutRead{
	padding: 0 0 30px;
	transform: scale(.65,1);
	width: 152%;
	transform-origin:left;
	border-bottom: 1px solid #0000E6;
}
.aboutRead p{
	font-family: "Noto Serif JP", serif;
	color: #0000E6;
	font-size: 1.6em;
	line-height: 120%;
	padding-bottom: 20px;
}

.profileChart{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #0000E6;
	padding: 0 0 50px;
}
.profileChart2{
	display: block;
	border-bottom: 1px solid #0000E6;
	padding: 0 0 50px;
}
.profileChart .profileChartTitle{
	width: 20%;
	color: #0000E6;
	font-size: 1.2em;
	padding: 50px 0 ;
	border-top: 1px solid #0000E6;

}

.profileChart2 .profileCharTxt2{
	color: #0000E6;
	font-size: 1.6em;
	padding: 50px 0 0;
	/*border-top: 1px solid #0000E6;*/
	text-align: center;
	font-family: "Noto Serif JP", serif;
	transform: scale(.65,1);
	width: 152%;
	transform-origin:left;
}

.profileChart2 .profileCharTxt2 h1{
	font-weight: normal;
}
.profileChart .profileCharTxt{
	width: 80%;
	color: #0000E6;
	font-size: 1.2em;
	padding: 50px 0;
	border-top: 1px solid #0000E6;
}
.profileChart .profileCharTxt input[type=text],
.profileChart .profileCharTxt input[type=email],
.profileChart .profileCharTxt textarea{
	padding: 10px 20px;
	border: 1px solid #0000E6;
	color: #0000E6;
	
	border-radius: 10px;
}


.profileChart .profileContactSubmit{
	text-align: center;
	padding: 50px 0;
	width: 100%;
	position: relative;
}
.profileChart .profileContactSubmit input[type=submit]{
	padding: 20px 50px;
	background: #0000E6;
	color: #fff;
	border-radius: 10px;
	border: none;
}


#otherDetail .wpcf7 form .wpcf7-response-output {
    margin: 30px 0;
	padding: 20px 20px;
    border: 1px solid #0000E6;
	text-align: center;
	border-radius: 10px;
}

#otherDetail .otherDetail .wpcf7 form.sent .wpcf7-response-output {
    border-color: #0000E6;
}


#otherDetail .wpcf7-spinner{
	display: none;
	
}
#otherDetail .wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 12px;
    font-weight: normal;
    display: block;
	margin-top: 5px;
}


@media screen and (max-width: 768px) {

	
	

	/*OTHER CONT*/


	#otherCont{
		max-width: 90%;
		margin: 0 auto;
		padding: 20px 0 20px 0;
	}

	#otherTop{

	}

	#otherTop section{

	}

	.contTitle{
		margin-bottom: 30px;
	}
	h2.contTitle {
		color: #0000E6;
		font-size: 1.4em;
		text-align: center;
	}





	#otherDetail{

	}

	#otherDetail section{

	}



	.aboutRead{
		padding: 10px 0 30px;
		transform: scale(.65,1);
		width: 152%;
		transform-origin:left;
	}
	.aboutRead p{
		font-family: "Noto Serif JP", serif;
		color: #0000E6;
		font-size: 1.2em;
		line-height: 120%;
		padding-bottom: 20px;
	}

	
	.profileChart{
		display: block;
		flex-wrap: wrap;
		border-bottom: 1px solid #0000E6;
		padding: 0 0 20px;
	}
	.profileChart2{
		display: block;
		flex-wrap: wrap;
		border-bottom: 1px solid #0000E6;
		padding: 0 0 20px;
	}
	.profileChart .profileChartTitle{
		width: 100%;
		color: #0000E6;
		font-size: .9em;
		padding: 20px 0 0px;
		border-top: 1px solid #0000E6;
		font-weight: bold;

	}

	.profileChart .profileCharTxt{
		width: 100%;
		color: #0000E6;
		font-size: .9em;
		padding: 10px 0 20px;
		border-top: none;
	}
	.profileChart2 .profileCharTxt2{
		font-family: "Noto Serif JP", serif;
		color: #0000E6;
		font-size: 1.2em;
		line-height: 120%;
		padding: 20px 0 10px;
		border-top: none;
		transform: scale(.65,1);
		width: 152%;
		transform-origin:left;
	}
	.profileChart .profileCharTxt input[type=text],
	.profileChart .profileCharTxt input[type=email],
	.profileChart .profileCharTxt textarea{
		padding: 10px 20px;
		border: 1px solid #0000E6;
		color: #0000E6;

		border-radius: 10px;
	}


	.profileChart .profileContactSubmit{
		text-align: center;
		padding: 10px 0 20px;
		width: 100%;
		position: relative;
	}
	.profileChart .profileContactSubmit input[type=submit]{
		padding: 20px 50px;
		background: #0000E6;
		color: #fff;
		border-radius: 10px;
		border: none;
	}


	#otherDetail .wpcf7 form .wpcf7-response-output {
		margin: 30px 0;
		padding: 20px 20px;
		border: 1px solid #0000E6;
		text-align: left;
		border-radius: 10px;
		
		font-size: 12px;
		
		line-height: 140%;
		
	}

	#otherDetail .otherDetail .wpcf7 form.sent .wpcf7-response-output {
		border-color: #0000E6;
	}


	#otherDetail .wpcf7-spinner{
		display: none;

	}
	#otherDetail .wpcf7-not-valid-tip {
		color: #dc3232;
		font-size: 12px;
		font-weight: normal;
		display: block;
		margin-top: 5px;
	}



}