/* Scss Document */
@import "/src/css/reset.css";
$smartphone   : '(min-width: 200px) and (max-width: 770px)';
$pc           : '(min-width: 771px)';
$iphoneXLandscape : '(min-width: 810px) and (max-width: 813px)';
$landscape    : '(min-width: 735px) and (max-width: 737px)';

$gold			:#927c56;
$pink			:#ff7372;
$blue			:#0087ae;
$green          :#024424;


body{
      font-family: "Noto Serif JP", serif !important;
}
#lp_ucla {	
header {
padding: 25px 0;
}

h1::before {display: none;}	
	background: #fefdfc;
	font-family: ryo-gothic-plusn,"Helvetica Neue", Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8em;
	letter-spacing: 0.8pt;
	color: #3e3a39;	
	p {
	margin-bottom: 0;font-family: "Noto Serif JP", serif;
	}
	a {
	color: #564226;
	}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.small {
font-size: 13px;
color: #323232;
}


h2 {
font-size: 25px;
font-weight: 600;
padding: 15px 0;
text-align: center;
position:relative;
margin-top: 30px;
span {font-size: 20px;}
}
h2::after{
content:"";
display:block;
width:20%;
height:3px;
background-color:#3e3a39;
margin: 0 auto;
margin-top: 15px;
}

@media #{$smartphone} {
	.fv_line {
	font-size: 19px;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
	font-size: 20px;
	font-weight: 900;
	}

	
}


h3 {
font-size: 26px;
font-weight: 900;
	line-height: 1.5em;
}

h4 {
font-size: 18px;
font-weight: bold;
	span {font-size: 13px; font-weight: normal;}
}



/*----------- custom -----------*/		
.font-gold {color: #927c56;}
.font-blue {color: #0087ae;}
.font-pink {color: #ff7372;}

.bold {font-weight: bold;}

.pick {font-size: 27px;}
.marker_yellow {background:linear-gradient(transparent 60%, #ff6 60%);}

		
	.main_img2 {
		background: url( "../images/bg.png") no-repeat center bottom;
		background-color:rgba(255,255,255,0.3);
		background-blend-mode:lighten;
		background-size: cover;
		width: 100%;
/*		height: 480px;*/
  		display: flex;
 		 justify-content: center;
 		 align-items: center;


			@media #{$smartphone} {
				.main_img2 {
				height: 120px;
				}
					.title2 {
					padding: 15px;
					line-height: 22px;
					font-weight: 700;
					font-size: 22px;
					span {font-size: 15px;}
					}

			}

		}
	
    .day{color: #024424; font-weight: bold; font-size: 18px; text-align: center;}
    
    .cast{
        font-size: 16px;
        text-align: center;
        line-height: 1.3em;
    }
    #bg_blue{
        background: #edf2eb;
        z-index: -99;
    }
.stepbar {
    max-width: 750px;
  margin: 0 auto;
  width: 100%;
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  border-radius: 50%;
  background-color: #024424;
  border: 2px solid #024424;
}

.stepbar .stepbarwrap .steptitle .stepnum {
  padding-left: 1em;
  font-size: 1em;
  color: #024424;
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 2em;
}

.stepbar .stepbarwrap .steptxt .steptxt-title {
  margin: 0.5em 0;
  font-weight: bold;
  font-size: 1.2em;
}

.stepbar .stepbarwrap .steptxt .steptxt-txt {
  font-size: 16px;
}
.push {
    font-weight: bold;
    line-height: 2em;
}
.stepbar .stepbarwrap .stepline {
  width: 2px;
  height: calc(100% + 1em);
  background-color: #024424;
  position: absolute;
  top: 1em;
  left: 0.4em;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}

@media screen and (max-width: 960px) {
  .stepbar {
    width: 90%;
  }
}
    
    .logo{
/*        img {max-width: 250px;
        width: 100%;
        margin: 0 auto;}*/
        
 /* ロゴの最大サイズを定義し、一貫性を保つ */
  .logo-img {
    max-width: 200px; /* ロゴの最大幅を調整 */
    max-height: 100px; /* ロゴの最大高さを調整 */
    object-fit: contain; /* アスペクト比を保ちつつ、指定されたサイズに収める */
    width: 100%; /* 親要素の幅に合わせて拡大縮小 */
    height: auto; /* 高さを自動調整 */
  }

  /* ロゴアイテムの最小幅を設定し、小さい画面での折り返しを制御 */
  .logo-item {
    flex-basis: 200px; /* 各ロゴアイテムの基準幅 (ロゴの最大幅より少し大きめに設定) */
    flex-grow: 1; /* スペースがある場合に拡大 */
    flex-shrink: 1; /* スペースがない場合に縮小 */
  }

  /* 小さい画面での調整 (例: 2列表示) */
  @media (max-width: 575.98px) { /* Extra small devices */
    .logo-item {
      flex-basis: 40%; /* 2列表示にするために調整 (2つで80%、余白で残りを消費) */
    }
  }

  /* 中間画面での調整 (例: 3列表示) */
  @media (min-width: 576px) and (max-width: 991.98px) { /* Small and Medium devices */
    .logo-item {
      flex-basis: 25%; /* 3列表示にするために調整 (3つで75%、余白で残りを消費) */
    }
  }

  /* 大きい画面での調整 (例: 5列表示) */
  @media (min-width: 992px) { /* Large devices and up */
    .logo-item {
      flex-basis: 15%; /* 5列表示にするために調整 (5つで75%、余白で残りを消費) */
    }
  }
        
    } 
    


	.cv_area {
	background: #fff684;
	width: 100%;
	text-align: center;
	padding: 40px 0;
.btn,
a.btn,
button.btn {width: 90%;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #ffffff;
  border-radius: 0.5rem;
    background: #ff324a;
    font-family: "Noto Serif JP", serif;
}
        
a.btn--red.btn--cubic {
  border-bottom: 5px solid #9f000c;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #9f000c;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}      
        
	}
/*===========
cvarea
=============*/
	
	.blue_back {
	background: #EBF4F9;
	margin: 20px 0;
	padding: 20px 0;
	}
	.circle {
	 height:50px;
	 width:50px;
	 border-radius:50%;
	 line-height:50px;
	 text-align:center;
	 background: $gold;
	 margin: 0 auto;
	 
	 span {color: #FFFFFF; font-weight: 900; font-size: 20px;}
	}

	.three_title {
	color: $gold;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
	margin-top: 5px;
	}

	.pickup {
		.subtitle {
		font-size: 17px;
		font-weight: 700;
		}
		.title {
		color: $gold;
		font-size: 16px;
		font-weight: 500;
		border-bottom: 1px solid $gold;
		padding-bottom: 5px;
		}
		
	}

	.point2 {
	background: #E9F3FB;
	border: 1px solid $green;
	border-radius: 10px;
	padding: 15px;
	line-height: 1.8em;
	.title {
	font-size: 20px;
	font-weight: 900;
	color: $green;
	}
	.subtitle {
	font-size: 14px;
	color: $green;
	border-bottom: 1px solid $green;
	}
	}
	
	
	table.scholarship{
	  width: 100%;
	  border-collapse: collapse;
	  border-spacing: 0;
	  margin-top: 20px;
	}

	table.scholarship th,table td{
	  padding: 10px 0;
	  padding-left: 5px;
	}

	table.scholarship tr:nth-child(odd){
	  background-color: #eee
	}
	
	.box {
	border: 1px solid #BCBCBC;
	border-radius: 10px;
	padding: 15px;
	}
	.row-eq-height {
		display: flex;
		flex-wrap: wrap;
	}

	
	.subtitle {
	font-size: 18px;
	font-weight: bold;
	margin-top: 15px;
	padding-bottom: 5px;
	border-bottom:  1px solid #155182;
	}
	
	
	ul.ranking {
	  list-style: none;
	  padding: 0;
	  margin: 0;
		i {
		  padding-right: 1em;
		  color: $gold;
		}	
	}
	
	.point_icon {
	color: $gold;
	font-size: 500%;
	}
	
.design08 {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
}
.design08 th {
 padding: 10px;
 background: #778ca3;
 border: solid 1px #666666;
 color: #ffffff;
}
.design08 td {
 padding: 10px;
 border: solid 1px #666666;
 vertical-align: middle;
}
.design08 td.first {
 background: #e9faf9;
}

	
.zi_box{
background: #ebe7df;
font-size: 26px;
font-weight: bold;
text-align: center;
padding: 15px;
margin-top: 15px;
 .small{font-size: 16px;}
}

#price_area{
	.price_main{
	font-size: 30px;
	font-weight: bold;
	color: #e80000;
	text-align: center;
	
	}
}
    
    #Member {
.table_design03 {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
    margin: 0 auto;
}
.table_design03 th, .table_design03 td {
  border-bottom: 2px solid #c1c7c6;
  padding: 1em;
}
.table_design03 th {
  border-bottom: 2px solid #024424;;
  font-weight: bold;
  text-align: left;
  width: 50%;
  min-width: 4em;
}
        
    }    
	}/* page */

	
footer {
    margin-top: 30px;
background: #024424 !important;
color: #FFFFFF;
padding: 10px;
font-size: 10px;
text-align: center;
    padding-bottom: 180px;
}