@charset "utf-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html{
	font-size:16px;
}
body{
	background-color: #fff;
	 font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
	font-weight: 600;
	color:#212121;
	font-size:1rem;
	margin:0;
	line-height:1.6;
}

body.nosc{
	overflow: hidden;
}

img{
	width:100%;
	height: auto;
}

a{
	color: inherit;
	text-decoration: none;
}

section:not(#main_vew):not(#book) h2{
	font-size:2.2rem;
	font-weight: 700;
	line-height: normal;
}

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


	headewr


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

header{
	width:100%;
	padding:5px 10px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#h_logo{
	width:290px;
	line-height: 0;
}

#h_japan{
	width:110px;
	line-height: 30px;
	background-color:#01245D;
	border-radius: 100px;
	font-size:0.9rem;
	color:#fff;
	padding:0 10px;
	position: relative;
}

#h_japan p{
	width:100%;
	display: flex;
	justify-content: center;
	gap:15px;
}


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

	#h_japan p{
		position: relative;
		order: 3;
	}
	#h_japan::after{
		content:'';
		width:0;
		height: 100%;
		display: block;
		background-color:#214A8C;
		border-radius: 100px;
		position: absolute;
		top:0;
		left:0;
		order: 2;
		transition: 0.1s;
	}
	#h_japan:hover::after{
		width:100%;
	}
}

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

	レスポンシブ

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

@media screen and (max-width: 980px) {
	header{
		align-items: center;
	}
}
@media screen and (max-width: 430px) {
	#h_logo{
		width: 200px;
	}
	
	#h_japan{
		width: 80px;
	}
}

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


	mainvew


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

#main_vew{
	width:100%;
	/*background-image: url("../img/back03.jpg");
	background-position: center bottom;*/
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: relative;
}

#main_vew_photo{
	width:100%;
	height: 800px;
 object-fit: cover; 
	object-position: center bottom; 
}

#main_vew_inner{
	width: 100%;
	height: 100%;
	margin:0 auto;
	padding-bottom: 20px;
	position: absolute;
	top:0;
	left:0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#main_vew_coment{
	width:min(95%,1200px);
	margin:0 auto;
	font-size:1.25rem;
	font-weight: 600;
	color:#fff;
	 text-shadow:1px 1px 0 rgba(5,74,100,0.80), -1px -1px 0 rgba(5,74,100,0.80),
              -1px 1px 0 rgba(5,74,100,0.80), 1px -1px 0 rgba(5,74,100,0.80),
              0px 1px 0 rgba(5,74,100,0.80),  0 -1px 0 rgba(5,74,100,0.80),
              -1px 0 0 rgba(5,74,100,0.80), 1px 0 0 rgba(5,74,100,0.80),
		 3px 3px 3px rgba(5,74,100,0.70);
}


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

	レスポンシブ

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

@media screen and (max-width: 980px) {
	#main_vew_coment{
		width:100%;
		padding:0 20px;
	}
}

@media screen and (max-width: 430px) {
	#main_vew_photo{
		object-position: right center; 
	}
	#main_vew_coment{
		line-height: normal;
		font-size:1.2rem;
	}
}



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


	merit


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

#merit{
	width:min(95%,1200px);
	padding:150px 0;
	margin:0 auto;
}

#merit h2{
	width:100%;
	margin:0 auto 80px auto;
}

#merit ul{
	width:100%;
	margin-top:80px;
	
}


#merit li{
	display: flex;
	align-items: center;
	padding:10px 20px 10px 30px;
	background-color: #F0F0F0;
	margin-bottom:10px;
	border-radius: 3px;
	gap:30px;
}

#merit li .ico{
	font-weight: 700;
	width:150px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 50% / 50%;
	font-size:24px;
	color:#fff;
	background-color: #01abc2;
	line-height: 1.2;
	padding:0 0 10px 0;
	text-align: center;
}

#merit li .ico strong{
	font-size:40px;
	font-weight: 800!important;
}


#merit li:nth-child(2) .ico{
	background-color: #4eb8ae;
}


#merit li:nth-child(3) .ico{
	background-color: #66bb6a;
}


#merit li:nth-child(4) .ico{
	background-color: #bfcb39;
}


#merit li:nth-child(5) .ico{
	background-color: #fca032;
}


#merit li:nth-child(6) .ico{
	background-color: #fc9474;
	font-size:20px;
}

#merit li .text{
	flex:1;
	color:#0B0B0B;
	line-height: 1.8;
}

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

	レスポンシブ

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

@media screen and (max-width: 980px) {
	#merit h2{
		width:min(100%,800px);
	}
	#merit li{
		flex-direction: column;
		padding:10px 20px 30px 20px;
		
	}
}

@media screen and (max-width: 430px) {
	#merit{
		padding:50px 0;
	}
}
/*---------------------------------


	Corporate philosophy


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

#philosophy{
	width:100%;
	height: 700px;
	background-image: url("../img/rinen_back02.jpg");
	background-position: left bottom -50px;
	background-size: 100% auto;
	margin:100px 0;
	position: relative;
}

section#philosophy h2{
	margin-bottom:15px;
}

#philosophy_text{
	width:600px;
	color:#fff;
	margin:0 auto;
	position: absolute;
	top:40px;
	right:20px;
}

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

	レスポンシブ

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

@media screen and (max-width: 980px) {
	#philosophy{
		width:100%;
		height: 800px;
		background-image: url("../img/rinen02.jpg");
		background-position: center bottom;
		background-size: auto 100%;
	}	
}

@media screen and (max-width: 430px) {
	#philosophy{
		background-position: center right -30px;
		margin:50px 0;
	}
	#philosophy_text{
		flex:none;
		width:100%;
		padding:0 20px;
		top:40px;
		right:0;
	}
}
/*---------------------------------


	ship


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

#chousa,
#hogei{
	wudth:100%;
	padding:100px 0;
	display: flex;
	align-items: center;
}

#chousa .photo,
#hogei .photo{
	/*width:1000px;*/
	flex:1;
}

#chousa .photo img,
#hogei .photo img{
	width:100%;
	height: 600px;
	object-fit: cover;
	border-radius: 0 3px 3px 0;
}

#hogei .photo img{
	 object-position: top left;
	border-radius: 3px 0 0 3px;
}

#chousa .photo img{
	 object-position: top left;
}

#chousa .text,
#hogei .text{
	flex:1;
	padding:0 20px;
	text-align: center;
}

#chousa .text_inner,
#hogei .text_inner{
	width:min(100%,600px);
	text-align: left;
	margin:0 auto;
}

#chousa .photo img,
#hogei .photo img{
	height: auto;
}

#chousa h2,
#hogei h2{
	margin-bottom:30px;
}

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

	レスポンシブ

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

@media screen and (max-width: 980px) {
	#chousa,
	#hogei{
		flex-direction: column;
		align-items: stretch;
	}
	
	#chousa .photo,
	#hogei .photo{
		width:100%;
		margin-top:50px;
		order: 2;
	}
	
	#chousa .photo{
		text-align: left;
		padding-right:20px;
	}
	
	#hogei .photo{
		text-align: right;
		padding-left:20px;
	}
	
	
	#hogei .photo img{
		 object-position: center left;
		border-radius: 3px 0 0 3px;
	}

	
	
	#chousa .text,
	#hogei .text{
		wwidth:100%;
		padding: 0 20px;
		order: 1;
	}
}

@media screen and (max-width: 430px) {
	#chousa,
	#hogei{
		padding:50px 0;
	}
	

	#chousa .photo img,
	#hogei .photo img{
		width:100%;
		height: 300px;
		object-fit: cover;
		border-radius: 0 3px 3px 0;
	}
	}

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


	book


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

#book{
	width:100%;
	margin:100px 0 0 0;
	padding:80px 0;
	background-image: url("../img/boovk_back.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center left;
}

#book_inner{
	width:min(95%,1200px);
	margin:0 auto;
	display: flex;
	align-items: center;
	gap:50px;
}

#book img{
	width:350px;
	border-radius: 3px;
	  filter: drop-shadow(5px 5px 5px rgba(7,99,133,0.5));
}

#book .text{
	flex:1;
	color:#fff;
	text-shadow:3px 3px 3px rgba(7,99,133,0.6);
}

#book .text a{
	width:min(100%,300px);
	display: block;
	background-color:#02245D;
	border-radius: 5px;
	padding:3px;
	margin-top:30px;
	position: relative;
	z-index: 1;
	 filter: drop-shadow(5px 5px 5px rgba(7,99,133,0.5));
}

#book .text a::before{
	content:'';
	background-color:#033890;
	display: block;
	width:0;
	height: 100%;
	border-radius: 5px;
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	transition: 0.1s;
}

#book .text a:hover::before{
	width:100%;
}

#book .text a p{
	width:100%;
	height: 65px;
	border: 2px solid rgba(255,255,255,0.5);
	display: flex;
	align-items: center;
	padding:0 5px 0 15px;
	border-radius: 5px;
	line-height: 1;
	position: relative;
	z-index: 3;
}

#book .text a span{
	width:100%;
	display: flex;
	align-items: flex-end;
	position: relative;
}

#book .text a span::after{
	content: '';
	flex:1;
	height: 1px;
	background-color: #fff;
	margin-left:30px;
}

#book .text a span::before{
	content: '';
	width:20px;
	height: 1px;
	display: block;
	background-color: #fff;
	transform: rotate(40deg);
	 transform-origin: right bottom; 
	position: absolute;
	bottom:0;
	right:0;
}

#book p.about{
	margin-top:10px;
	padding-left: 0.5em;
	text-indent: -0.5em;
	font-size:0.85rem;
}


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

	レスポンシブ

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

@media screen and (max-width: 980px) {
	#book{
		background-size: auto 100%;
		background-position: center;
		padding:80px 20px;
	}
	#book_inner{
		width:100%;
		display: block;
		text-align: center;
	}
	
	#book img{
		width:min(100%,200px);
	}
	
	#book .text{
		text-align: left;
		margin-top:30px;
	}
}
/*---------------------------------


	part


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

#part{
	width:min(95%,1200px);
	margin:0 auto;
	padding:100px 0;
}
#part_inner{
	width:100%;
	display: flex;
	gap:20px;
	align-items: stretch; 
}

#part_inner .p_item{
	flex:1;
	/*display: flex;
	flex-direction: column;*/
}

#part_inner .p_item .image{
	width:100%;
	line-height: 0;
}

#part_inner .p_item .image img{
	width:100%;
	height: auto;
}
#part_inner dl{
	flex:1;
	margin-top:50px;
	width:100%;
	max-width:100%;
}

#part_inner dt{
	margin-bottom:20px;
	padding-left: 5px;
	border-radius: 5px;
	display: flex;
	align-items:stretch;
	align-items: center;
	cursor: pointer;
	position: relative;
}

#part_inner dt p{
	background-color: #000;
	position: relative;
	z-index: 2;
}

#part_inner dt::after{
	 font-family: "Noto Sans JP", sans-serif;
	content:"＋";
	width:auto;
	height: 40px;
	line-height: 1;
	padding-right:3px;
	aspect-ratio:1/1;
	color:#fff;
	font-size:20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	text-align: right;
	background-color: rgba(255,255,255,0.3);
	margin-left:5px;
}

#part_inner dt.act::after{
	content:"ー";
	font-size:18px;
}

#part_inner dt .no{
	font-family: "Roboto", sans-serif;
  font-weight: 800;
	width:34px;
	height: 34px;
	line-height: 34px;
	font-size:23px;
	background-color: #fff;
	border-radius: 50%/50%;
	text-align: center;
	letter-spacing: -0.05em;
}

#part_inner dt .text{
	flex:1;
	font-size:20px;
	line-height: 1;
	margin-left:10px;
	color:#fff;

}

#part_inner dt  .syousai{
	background-color: rgba(255,255,255,1);
	border-radius:5px;
	font-size:14px;
	line-height: normal;
	margin-right:5px;
	padding:0 8px;
}
#part_A dt,
#part_B dt.p_a{
	background-color:#76b7cd;
}

#part_A dt .no,
#part_B dt.p_a .no{
	color:#76b7cd;
}

#part_B dt{
	background-color:#ee8b9a;
}

#part_B dt .no{
	color:#ee8b9a;
}

#part_inner #part_B  dt  .syousai{
	color:#ee8b9a;
}

#part_inner #part_A dt  .syousai,
#part_inner #part_B dt.p_a  .syousai {
	color:#2E8EAF;
}
#part dd{
	padding:0 5px 20px 5px;
	display: none;
}

#part dd .photo{
	width: min(95%,200px);
	line-height: 0;
	margin:0 auto 20px auto;
}

#part dd .photo img{
	width:100%;
	height: auto;
}


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


	footer


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

footer{
	width:100%;
	background-color:#02245D;
	padding:5px 0;
	text-align: center;
	line-height: 1;
	color:rgba(255,255,255,0.55);
	font-size:0.8rem;
}

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


	loading


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

#loading{
	width:100%;
	height: 100dvh;
	position: fixed;
	top:0;
	left:0;
	background-color: #fff;
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}

#loading img{
	width:300px;
	 animation: fadeAnimation 1.5s ease-in-out infinite alternate;
}

#loading.hide{
	opacity: 0;
	visibility: hidden;
}


@keyframes fadeAnimation {
  0% {
    opacity: 1; /* 完全に不透明 */
  }
  100% {
    opacity: 0.3; /* 少し透明 */
  }
}