@charset "utf-8";
@import url("philosophy.css");




#logo {
    position: absolute;
    top: 0;
    left: 0;
}

#logo img{
    position: relative;
    z-index: 1011;
    width: 35%;
    margin: 0.6rem 0 0 0.5rem;
}

.sp-size-text {
	position: absolute;
	top: 0;
	left: 0;
}

.sp-size-text img{
	position: relative;
	z-index: 1010;	
	width: 100%;
	opacity: 70%;
}

/* 写真の位置設定 */
/* ******スライドショー　デスクトップ版****** */

.pict-slide {
	width: 100%;
    aspect-ratio: 3 / 1;
	overflow: hidden;
	position: relative;
	max-width: 1800px;
}

.pict-slide div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	15%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.pict-slide div:first-of-type{
	background-image: url("../images/philosophy/philosophy_01.webp");
}
.pict-slide div:nth-of-type(2){
	background-image: url("../images/philosophy/philosophy_02.webp");
	animation-delay: 6s;
}
.pict-slide div:nth-of-type(3){
	background-image: url("../images/philosophy/philosophy_03.webp");
	animation-delay: 12s;
}
.pict-slide div:nth-of-type(4){
	background-image: url("../images/philosophy/philosophy_04.webp");
	animation-delay: 18s;
}
.pict-slide div:last-of-type{
	background-image: url("../images/philosophy/philosophy_05.webp");
	animation-delay: 24s;
}

.pict-slide img {
	position: relative;
	width: 100%;
	opacity: 70%;
}



/* 写真の位置設定 */
/* ******スライドショー　スマホ版****** */

.pict-slide-S {
	width: 100%;
    aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	max-width: 800px;
}

.pict-slide-S div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	15%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.pict-slide-S div:first-of-type{
	background-image: url("../images/philosophy/philosophy-S_01.webp");
}

.pict-slide-S div:nth-of-type(2){
	background-image: url("../images/philosophy/philosophy-S_02.webp");
	animation-delay: 6s;
}
.pict-slide-S div:nth-of-type(3){
	background-image: url("../images/philosophy/philosophy-S_03.webp");
	animation-delay: 12s;
}
.pict-slide-S div:nth-of-type(4){
	background-image: url("../images/philosophy/philosophy-S_04.webp");
	animation-delay: 18s;
}
.pict-slide-S div:last-of-type{
	background-image: url("../images/philosophy/philosophy-S_05.webp");
	animation-delay: 24s;
}

.pict-slide img {
	position: relative;
	width: 100%;
	opacity: 70%;
}

.main {
	position: relative;
	width: 86%;
	margin: 4em auto 0;
}

h1 {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	width: 30%;
	font-size: 3vw;
	font-weight: 600;
	letter-spacing: 25px;
	text-align: center;
	color: #3F3333;
	margin-left: 1.4%;
}

h2 {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	width: 30%;
	font-size: 3.2vw;
	font-weight: 600;
	letter-spacing: 8px;
	text-align: center;
	color: #3F3333;
	margin-left: 1.4%;
}

.under-line_01 {
	display: flex;
	margin-top: -6px;
}

.u_l_01 {
    width: 30%;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 4px solid #483d8b;
}

.u_l_02 {
    width: 70%;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 4px solid #eee8aa;
}

.philosophy p {
	width: 70%;
	margin-left: 33%;
	margin-top: 0.4em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 32px;
	letter-spacing: 8px;
	font-weight: 700;
	line-height: 54px;
	color: #3F3333;
}

.policy {
	margin-top: 6em;
}

.policy p {
	width: 70%;
	margin-left: 33%;
	margin-top: 10px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 1.8vw;
	letter-spacing: 1px;
	line-height: 32px;
}

.overview {
	margin-top: 6em;
}

.overview p {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1.8vw;
	width: 70%;
	list-style: none;
	margin-top: 10px;
	margin-left:33%;
}

.overview ul {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1.6vw;
	width: 70%;
	list-style: none;
	margin-top: 10px;
	margin-left:34%;
}

.overview li {
	position: relative;
	margin-bottom: 4px;
}

.overview li::before {
	content: "・";
}

.B_overview {
	margin-top: 7em;
	margin-bottom: 8em;
}

.B_overview table {
    width: 65%;
    margin-top: 2em;
    margin-left: 32%;
    border: 2px solid #6B6B6B;
}

.B_overview th {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 2.0vw;
	font-weight: 500;
	padding: 6px 1%;
}


.for_top_page {
	border: solid 2px #6A774C;
	background-color: #FFFFFF;
	opacity: 80%;
	width: 65px;
	height: 65px;
	border-radius: 50px;
	position: fixed;
	top: 500px;
	right:3%;
	z-index: 201;
}

.for_top_page a {
    text-decoration: none;
}

.for_top_page p {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	text-align: center;
	font-size: 15px;
	line-height: 14px;
	font-weight: 700;
	color: #6A774C;
	margin: 10px auto;
}

.for_top_page span{
	font-weight: 900;
	font-size:18px;
	line-height: 4px;
}

.for_top_page:hover {
    background-color: #DFDCB1;
}


.for_top {
	border: solid 2px #5B7A80;
	background-color: #FFFFFF;
	opacity: 80%;
	width: 65px;
	height: 65px;
	margin-top: 2em;
	border-radius: 50px;
	position: fixed;
	top: 360px;
	right: 3%;
	z-index: 202;
}

.for_top p {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    text-align: center;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
	color: #5B7A80;
	margin: 12px auto;
}

.for_top span{
	font-weight: 900;
	font-size:18px;
}

.for_top a {
	text-decoration: none;
}

.for_top:hover {
    background-color: #E4E4E4;
}

.jump_btn {
    position: relative;
    width: 60%;
    cursor: pointer;
    background-color: #005070;
    border-radius: 20px;
    text-align: center;
    margin: 0 auto;
	}

.jump_btn a {
	text-decoration: none;
	color: #FFF;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 2vw;
	font-weight: 600;
}

.jump_btn:hover {
    background-color: #71789A;
}


/*フッター
---------------------------------------- */
.copyright{
  /*  background-color: #021F39;*/
    background-image: url("../images/footer.webp");
    width: 100%;
    text-align: center;
    margin-top: 4rem;
}

    .copyright small{
    color: #FFFFFF;
    font-family:"Times New Roman", Times, "serif";
    font-size: 12px;
    padding-top: 0.1rem;
}


/* デスクトップ版設定
--------------------------------- */

@media (min-width: 801px){
	 .pict-slide-S {
		display:none;
	}
	
	.sp-size {
		display: none;
	} 
	
	.sp-size-text {
		display: none;
	}
}

/*スマホ版設定
--------------------------------- */

@media (max-width: 800px){
	
	/* ロゴの大きさ設定 */

	#logo {
		margin-top: 0.6rem;
		width:90%;
}
	#logo img {
		width: 50%;
	}
	
	.pict-slide {
		display:none;
	}
	
	.u_l_01 {
		width: 70%;
		margin: 4px auto 0;
	}
	.u_l_02 {
		display: none;
	}
	
	h1 {
		width: 70%;
		
		font-size: 7vw;
		margin: 0 auto ;
	}
	.philosophy p {
		width: 96%;
		text-align: center;
		line-height: 2em;
		margin: 0.5em auto 3em;
		font-size: 6vw;
		letter-spacing: 4px;
	}
	
	
	.policy {
		
	}
	
	h2 {
		width: 100%;
		font-size: 6.4vw;
		margin-left: auto;
		margin-right: auto;
		letter-spacing: 10px;
	}
	
	.policy p {
		width: 80%;
		margin: 3vh auto 4vh;
		font-size: 4vw;
		line-height: 7vh;
	}
	
	.overview p {
		width: 76%;
		font-size: 4vw;
		margin: 0.5em auto;
	}
	
	.overview ul {
		width: 92%;
		margin: 0 auto ;
	    font-size: 4.2vw;
		line-height: 5.4vh	
	}
	
	.overview li {
		margin-bottom: 16px;
	}
	
	.B_overview {
		width: 98%;
	}
	
	.B_overview table {
		width: 96%;
		margin: 3em auto;
	}
	
	.B_overview th {
		font-size: 4vw;
		line-height: 5vh;
	}
	
	.B_overview span {
		text-align: left;
		font-size: 3vw;
	}
	
	.jump_btn {
	position: relative;
	width: 90%;
	background-color:#256593;
	border-radius: 20px;
	text-align: center;
	margin: 0 auto;
	}

    .jump_btn a {
	text-decoration: none;
	color: #FFF;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 4vw;
	font-weight: 600;
}
	
	.for_top {
		top: 450px;
	}
	
	.for_top_page {
		top: 560px;
	}

}