@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body { color: #333333; line-height: 1.5;  background: #fff;}
a { color: #1e84b9;  text-decoration: none;}
a:hover { text-decoration: underline;}
.clickable a, .clickable a:hover { color: #333;}
.flex {display: flex; display:-webkit-flex; justify-content: space-between; flex-wrap: wrap;}
.ff-serif {font-family: 'Noto Serif JP', serif;}
#mainContainer{ width: 100%; position: relative; overflow: hidden;}
.inrContent {width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto;}

/* ----------------------------------------------------
header(common)
---------------------------------------------------- */
#header  {position: fixed;  z-index: 100; width: 100%; left: 0; top: 0; height: 8rem; padding: 1.1rem 5rem; }
#header.scroll {background: rgba(0,0,0,0.8); opacity: 0; animation: fade 0.5s ease  forwards;}
@keyframes fade {
   0% {opacity: 0; }
   100% {opacity: 1; }
}

#hd-logo {position: absolute; left: 2rem; top: 3rem;  }
#hd-logo img {width: 30rem; height: auto;}

/* corp bottom */
#corporateBtn {position: fixed; right: 2.5rem; top: 2.5rem; width: 14rem; height: 3.5rem; z-index: 90;}
#corporateBtn a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: #444; color: #fff; border-radius: 30px;}

/* ----------------------------------------------------
underlayer (common)
---------------------------------------------------- */
.visual {height: 36.6vw; max-height: 550px; background: #fff; position: relative; display: flex; display: -webkit-flex; justify-content: center; align-items: center; background-position: center top; background-repeat: no-repeat; background-size: cover; background-image: url("../img/bg-visual.jpg");}
.visual::before {content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.4);}
.visTitle {color: #fff; width: 90%; max-width: 1200px; position: relative; z-index: 10;}
.visTitle h2 {font-size: 5.6rem;}
.visTitle p {margin: 0; font-size: 2rem;}

.mainRead{width:80%; max-width: 1200px; margin: 100px auto 0 auto; font-size: 1.8rem; line-height: 4.6rem;}
.contAria{width:80%; max-width: 1200px; margin: 0 auto;}
.order01{order:1;}
.order02{order:2;}

.box20250307{border: 1px solid #c1c1c1; padding: 20px 180px;  margin: 80px 0;}
.txt20250307box { font-size: 2.0rem; font-weight: bold; text-align: center; display: block; margin: 20px auto;}
/*ul.entryBox{display: flex; display: -webkit-flex; justify-content: space-between;}*/
ul.entryBox{}
/*ul.entryBox li{width: 47%;font-size: 1.7rem;	font-weight: 600; text-align: center; color: black;	text-decoration: none;}*/
ul.entryBox li{width: 47%;font-size: 1.7rem;	font-weight: 600; text-align: center; color: black;	text-decoration: none; margin: 0 auto;}
ul.entryBox li a{font-size: 1.7rem;	font-weight: 600; text-align: center; color: black;	text-decoration: none;}
ul.entryBox li span{display: block;	text-align: center;}
ul.entryBox li p{border: 1px solid #c1c1c1;	margin-top: 10px;}
ul.entryBox li img{width: 100%;}


/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
footer{background-color:black; padding: 10px 0;}
footer p{color: #5e5e5e; font-size: 1.4rem; text-align: center;}

.bt-prapa{display:block; text-align: center;}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */
/* hover */
a:hover { opacity: .65;	filter: alpha(opacity=65);  text-decoration: none;	transition: all 0.2s ease-in-out;}
a img:hover {  opacity: .65; filter: alpha(opacity=65);	transition: all 0.2s ease-in-out;}
.clickable:hover {filter: alpha(opacity=65) ;	opacity: .65;transition: all 0.2s ease-in-out;}
.br_spOnly{display: none;}
.br_pcOnly{display: block;}
}

@media (max-width: 1500px) {
.box20250307{padding: 1.333vw 12vw;}
.txt20250307box { font-size: 1.5vw; margin: 20px auto;}
ul.entryBox li{font-size: 1.333vw;}
ul.entryBox li a{font-size: 1.333vw;}
ul.entryBox li p{margin-top: 0.667vw;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

/* ----------------------------------------------------
header(<1200)
---------------------------------------------------- */
#header  {height: 6.6vw; padding: 0.9vw 5%; }
#hd-logo { left: 1.66vw; top: 2.5vw;  }
#hd-logo img {width: 25vw; }

/* corp bottom */
#corporateBtn {right: 2vw; top: 2vw; width: 11.6vw; height: 3.2vw;}
	
/* ----------------------------------------------------
underlayer (<1200)
---------------------------------------------------- */
.visTitle h2 {font-size: 4.66vw;}
.visTitle p {font-size: 1.66vw;}
.mainRead{margin: 5.8vw auto 0 auto; font-size: 1.5vw; line-height: 3.417vw;}

.box20250307{padding: 1.667vw 10vw;}
.txt20250307box { font-size: 1.8vw; margin: 20px auto;}
ul.entryBox{font-size: 1.5vw;}
	ul li{font-size: 1.5vw;}
ul.entryBox li a{font-size: 1.5vw;}
ul.entryBox li p{margin-top: 0.833vw;}	
	
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
.br_spOnly{display: block;}
.br_pcOnly{display: none;}
.spNone{display: none;}
  
/* corp bottom */
#corporateBtn {right: 3.8vw; width: 25vw; height: 7vw; top: 3.8vw; font-size: 3.6vw;}
	
/* ----------------------------------------------------
header(sp)
---------------------------------------------------- */
@media (orientation: portrait) { /* スマホ縦 */
#header  {height: 14vw; padding: 2vw; position:fixed; left: 0; top: 0; width: 100%;}
#hd-logo {position: relative; left: 0; top: 0; display: flex; display: -webkit-flex; align-items: center; height: 100%;}
#hd-logo img {width: 50vw; }


}

@media (orientation: landscape) {/* スマホ横 */

}


/* ----------------------------------------------
underLayer(sp)
-------------------------------------------------- */
.mainRead{width:91%; margin: 9.8vw auto 0 auto; font-size: 3.6vw; line-height: 6.433vw;}
.contAria{width:91%;}

.box20250307{ margin: 7vw 0;padding: 2.667vw 0;}
.txt20250307box { font-size: 3.2vw; margin: 10px auto;}
ul.entryBox{ flex-flow: column; align-items: center;}
ul.entryBox li{width: 90%;font-size: 3.0vw;}
ul.entryBox li a{font-size: 3.0vw;}
ul.entryBox li p{margin-top: 0.833vw;}	
	
@media (orientation: portrait) { /* スマホ縦 */
	.visual {height: 50vh; max-height: inherit; }
	.visTitle h2 {font-size: 7vw;}
	.visTitle p {font-size: 4vw;}
}

@media (orientation: landscape) {/* スマホ横 */
	.visTitle h2 {font-size: 4rem}
	.visTitle p {font-size: 2rem;}
}
	
	
	

}