/* 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;



#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;
	}
	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;
}


	.btn_pink {
	font-family: Ryo Gothic PlusN H , sans-serif;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
	position: relative;
	z-index: 2;
	background-color: #ff7372;
	border: 2px solid #ff7372;
	color: #fff;
	line-height: 50px; 
	border-bottom: 1px solid #713036;
	border-radius: 5px;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	background: $pink;
	}

	.btn_pink:hover {
	  background-color: #fff;
	  border-color: #ff7372;
	  color: #ff7372;
	}
	.btn_pink::before,
	.btn_pink::after {
	  top: 0;
	  width: 50%;
	  height: 100%;
	  background-color: #ff7372;
	  position: absolute;
	  z-index: -1;
	  display: block;
	  content: '';
	}
	.btn_pink::before {
	  right: 0;
	}
	.btn_pink::after {
	  left: 0;
	}
	.btn_pink:hover::before,
	.btn_pink:hover::after {
	  width: 0;
	  background-color: #ff7372;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  -webkit-transition: all .3s;
	  transition: all .3s;
	}

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/california_main2.jpg") 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;

		.title {
		padding: 20px;
		text-align: center;
		line-height: 2em;
		font-weight: 900;
		font-size: 2em;
		color: #0087ae;
		filter: drop-shadow(0px 0px 5px rgba(255,255,255,1.9));
		}
		.title2 {
		padding: 20px;
		text-align: center;
		line-height: 2em;
		font-weight: 900;
		font-size: 2em;

		filter: drop-shadow(0px 0px 5px rgba(255,255,255,1.9));
		span {font-size: 22px;}
		}
			@media #{$smartphone} {
				.main_img2 {
				height: 120px;
				}
					.title2 {
					padding: 15px;
					line-height: 22px;
					font-weight: 700;
					font-size: 22px;
					span {font-size: 15px;}
					}

			}

		}
	

	.support_icon {
	background: $blue;
	color: #FFFFFF;
	padding: 15px;
	font-size: 22px;
	border: 1px solid #BFFFFA;
	margin-bottom: 5px;
	}	
		
	.pink_box2 {
	border: 3px solid $pink;
	text-align: center;
	font-size: 17px;
	padding: 30px 15px 20px 15px;
	}
	.blue_box2 {
	border: 3px solid $blue;
	text-align: center;
	font-size: 17px;
	padding: 30px 15px 20px 15px;
	}	
	.gold_box2 {
	border: 3px solid $gold;
	text-align: center;
	font-size: 17px;
	padding: 30px 15px 20px 15px;
	}	

	@media #{$smartphone} {
	.pink_box2 {
	font-size: 12px;
	}
	.blue_box2 {
	font-size: 12px;
	}	
	.gold_box2 {
	font-size: 12px;
	}	
	}
	
	
	
		
	.bg_gold {
	background: #E8E4D4;
	width: 100%;
	padding: 10px 0 20px 0;
	}
	
	.cv_area {
	background: #fff684;
	width: 100%;
	text-align: center;
	padding: 40px 0;
	
	.cvbtn {
	font-family: Ryo Gothic PlusN H , sans-serif;
	  display: inline-block;
	  width: 90%;
	  text-align: center;
	  text-decoration: none;
	  line-height: 90px;
	  outline: none;
	  position: relative;
	  z-index: 2;
	  background-color: $pink;
	  border: 2px solid $pink;
	  color: #fff;
	  font-size: 200%;
	  line-height: 1.5em; 
	  font-weight: 900;
	  padding: 15px;
	  border-bottom: 4px solid #781618;
	  border-radius: 5px;
	}
	.cvbtn span.small {font-size: 15px;}
	.cvbtn:hover {
	  background-color: #fff;
	  border-color: $pink;
	  color: $pink;
	}
	.cvbtn::before,
	.cvbtn::after {
	  top: 0;
	  width: 50%;
	  height: 100%;
	  background-color: $pink;
	  position: absolute;
	  z-index: -1;
	  display: block;
	  content: '';
	}
	.cvbtn::before {
	  right: 0;
	}
	.cvbtn::after {
	  left: 0;
	}
	.cvbtn:hover::before,
	.cvbtn:hover::after {
	  width: 0;
	  background-color: $pink;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  -webkit-transition: all .3s;
	  transition: all .3s;
	}
	@media #{$smartphone} {
	.cv_text{
	font-size: 13px;
	line-height: 1.4em;
	text-align: left;
	}
	.cvbtn {
	  width: 100%;
	  font-size: 18px;
	  line-height: 1.5em; 
	  font-weight: 700;
	  padding: 10px;
	}
	}
	
	
	
	
	.shiryo {
	font-family: Ryo Gothic PlusN H , sans-serif;
	  display: inline-block;
	  width: 90%;
	  text-align: center;
	  text-decoration: none;
	  line-height: 90px;
	  outline: none;
	  position: relative;
	  z-index: 2;
	  background-color: $blue;
	  border: 2px solid $blue;
	  color: #fff;
	  font-size: 200%;
	  line-height: 1.5em; 
	  font-weight: 900;
	  padding: 15px;
	  border-bottom: 4px solid #00416b;
	  	  border-radius: 5px;
	}
	.shiryo span.small {font-size: 15px;}
	.shiryo:hover {
	  background-color: #fff;
	  border-color: $blue;
	  color: $blue;
	}
	.shiryo::before,
	.shiryo::after {
	  top: 0;
	  width: 50%;
	  height: 100%;
	  background-color: $blue;
	  position: absolute;
	  z-index: -1;
	  display: block;
	  content: '';
	}
	.shiryo::before {
	  right: 0;
	}
	.shiryo::after {
	  left: 0;
	}
	.shiryo:hover::before,
	.shiryo:hover::after {
	  width: 0;
	  background-color: $blue;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  -webkit-transition: all .3s;
	  transition: all .3s;
	}
	@media #{$smartphone} {
	.cv_text{
	font-size: 13px;
	line-height: 1.4em;
	text-align: left;
	}
	.shiryo {
	  width: 100%;
	  font-size: 18px;
	  line-height: 1.5em; 
	  font-weight: 700;
	  padding: 10px;
	}
	}
	
	


	}
/*===========
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 $blue;
	border-radius: 10px;
	padding: 15px;
	line-height: 1.8em;
	.title {
	font-size: 20px;
	font-weight: 900;
	color: $blue;
	}
	.subtitle {
	font-size: 14px;
	color: $blue;
	border-bottom: 1px solid $blue;
	}
	}
	
	
	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;
	
	}
}
	}/* page */

	
footer {
background: #1e6c93 !important;
color: #FFFFFF;
padding: 10px;
font-size: 10px;
text-align: center;
}