@charset "UTF-8";
/*------------------------
トップイメージ
------------------------*/
#topimg {
	position: relative;
}
#topimg .txt-wrap h1 {
	height: auto;
}
#topimg .txt-wrap h1.image img {
	object-fit: contain;
}
#topimg .txt-wrap .textarea {
	font-weight: bold;
}
#topimg .main-img {
	position: absolute;
}
#topimg .main-img img {
	object-fit: contain;
}
#topimg .robot{
	height: auto;
	position: absolute;
	z-index: 0;
}
/* PC */
@media screen and (min-width:768px) {
	#topimg {
		background: url(../img/top_bg.jpg) no-repeat;
		background-size: cover;
	}
	#topimg .inner {
		width: 1200px;
		margin: 0 auto;
		padding-bottom: 60px;
		position: relative;
	}
	#topimg .flex-box {
		justify-content: space-between;
		min-height: 520px;
		margin-bottom: 20px;
	}
	#topimg .txt-wrap {
		padding: 100px 0 0;
		z-index: 10;
	}
	#topimg .txt-wrap h1 {
		width: 700px;
		margin-bottom: 35px;
	}
	#topimg .txt-wrap .textarea {
		font-size: 19px;
	}
	#topimg .main-img {
		width: 670px;
		right: 0;
	}
	#topimg .robot{
		width: 240px;
		left: -30px;
		bottom: -20px;
	}

	/* 共通 */
	.btn-wrap {
		display: flex;
		justify-content: space-between;
		width: 830px;
		margin: 0 auto;
		z-index: 10;
		position: relative;
	}
	.btn-wrap .btn a {
		width: 400px;
		background: none;
	}
	.btn-wrap .btn a::after{
		content: none;
	}
}

/* SP */
@media screen and (max-width:767px) {
	body{
		padding-top: 18.67vw;
	}
	#topimg {
		background: url(../img/top_bg.jpg) no-repeat;
		background-size: cover;
	}
	#topimg .inner {
		position: relative;
		padding: 6.67vw 4vw 8vw;
	}
	#topimg .flex-box {
		display: block;
		margin-bottom: 6.67vw;
	}
	#topimg .txt-wrap {
		margin-bottom: 6.67vw;
	}
	#topimg .txt-wrap h1 {
		width: 82.67vw;
		margin-bottom: 5.33vw;
	}
	#topimg .txt-wrap .textarea {
		font-size: 3.43vw;
	}
	#topimg .main-img {
		width: 74.67vw;
		position: unset;
		margin: 0 0 0 auto;
	}
	#topimg .robot{
		width: 32vw;
		left: 0px;
		bottom: 67.67vw;
	}

	/* 共通 */
	body .btn-wrap {
		margin: 0 auto !important;
		z-index: 10;
		position: relative;
	}
	.btn-wrap .btn a {
		width: 100%;
		height: auto;
		background: none;
		margin-bottom: 4vw !important;
	}
	.btn-wrap .btn:last-child a{
		margin-bottom: 0;
	}
	.btn-wrap .btn a::after{
		content: none;
	}
}

/*------------------------
KOBE◆KATSU
------------------------*/
.kobekatsu a{
	background: var(--bg);
	border: 4px solid var(--blue);
	position: relative;
}
.kobekatsu a::after{
	content: "";
	background: url(../img/arrow_blue.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top:0;
	bottom: 0;
	margin: auto;
}
.kobekatsu .ttl{
	font-weight: bold;
	line-height: 1;
	color: var(--blue);
}
.kobekatsu .txt{
	font-weight: 500;
}
/* PC */
@media screen and (min-width:768px) {
	.kobekatsu a{
		width: 800px;
		margin: 60px auto;
		padding: 25px 40px;
		border-radius: 12px;
	}
	.kobekatsu a:hover{
		transform: translateY(10px);
	}
	.kobekatsu a::after{
		width: 28px;
		height: 28px;
		right: 20px;
	}
	.kobekatsu .ttl{
		font-size: 24px;
	}
	.kobekatsu .txt{
		font-size: 17px;
		margin-top: 10px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	.kobekatsu a{
		margin: 6.67vw 4vw 0;
		padding: 4vw;
		border-radius: 12px;
	}
	.kobekatsu a::after{
		width: 6.4vw;
		height: 6.4vw;
		right: 2.67vw;
	}
	.kobekatsu .ttl{
		font-size: 4.43vw;
	}
	.kobekatsu .txt{
		font-size: 3.2vw;
		font-weight: bold;
		margin-top: 10px;
	}
}


/*------------------------
お知らせ
------------------------*/
#news ul {
	border-top: 1px solid var(--orange);
}
#news ul li a {
	border-bottom: 1px solid var(--orange);
}
#news ul li .tag-wrap {
	display: flex;
	align-items: center;
	white-space: nowrap;
}
#news ul li .tag-wrap .day {
	font-weight: bold;
}
#news ul li .tag-wrap .tag {
	font-weight: bold;
	background: var(--orange);
	color: #fff;
	display: flex;
	align-items: center;
	border-radius: 50px;
}
#news ul li .ttl {
	letter-spacing: .04em;
	font-weight: bold;
	line-height: 1.5;
}
/* PC */
@media screen and (min-width:768px) {
	#news .inner{
		padding: 0 0 80px;
		display: flex;
		justify-content: space-between;
	}
	#news .ttl-wrap {
		width: 156px;
		margin-bottom: 24px;
	}
	#news ul {
		width: 860px;
	}
	#news ul li a {
		display: flex;
		align-items: center;
		padding: 15px 0;
	}
	#news ul li a:hover{
		background: var(--bg);
	}
	#news ul li .tag-wrap {
		margin-right: 30px;
	}
	#news ul li .tag-wrap .day {
		margin-right: 15px;
		font-size: 16px;
	}
	#news ul li .tag-wrap .tag {
		font-size: 14px;
		height: 28px;
		padding: 0 12px;
		border-radius: 50px;
	}
	#news ul li .ttl {
		font-size: 17px;
	}
	#news .btn a{
		width: 260px;
		height: 50px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#news .ttl-wrap {
		width: 24vw;
		margin: 0 auto 4vw;
	}
	#news ul {
		border-top: none;
		margin-bottom: 5.33vw;
	}
	#news ul li a {
		padding: 4vw 0;
	}
	#news ul li .tag-wrap {
		margin-bottom: 1.33vw;
	}
	#news ul li .tag-wrap .day {
		margin-right: 4vw;
		font-size: 3.43vw;
	}
	#news ul li .tag-wrap .tag {
		font-size: 3.4vw;
		height: 6.67vw;
		padding: 0 2.67vw;
	}
	#news ul li .ttl {
		font-size: 4.27vw;
	}
	#news .btn.pc{
		display: none;
	}
}

/*------------------------
神戸ロボットクラブってどんな教室？
------------------------*/
#about {
	background: var(--blue);
}
#about::before{
	content: "";
	width: 100%;
	height: 100%;
	background: url(../img/about_bg.png) bottom no-repeat;
	background-size: cover;
	mix-blend-mode: soft-light;
	position: absolute;
}
#about .ttl-wrap .sub-text {
	font-weight: 500;
	color: #fff;
	text-align: center;
}
#about .card-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#about .card-list .card a {
	background: #fff;
	box-shadow: 0px 6px 0px 0px rgba(12, 137, 168, 1), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
}
#about .card-list .card a .ttl {
	line-height: 1;
	color: var(--orange);
	font-weight: bold;
	text-align: center;
}
#about .card-list .card .textarea {
	font-weight: 500;
	line-height: 1.4;
}
#about .deco-robot {
	height: auto;
	position: absolute;
	top: 0;
}
/* PC */
@media screen and (min-width:768px) {
	#about .inner {
		padding: 70px 0 100px;
		position: relative;
	}
	#about .ttl-wrap {
		margin-bottom: 40px;
	}
	#about .ttl-wrap h2 {
		width: 664px;
		margin: 0 auto 25px;
	}
	#about .ttl-wrap .sub-text {
		font-size: 18px;
	}
	#about .card-list .card a {
		width: 380px;
		min-height: 290px;
		padding: 30px 25px 25px;
		border-radius: 20px;
		margin-bottom: 30px;
	}
	#about .card-list .card a:hover{
		transform: translateY(6px);
	}
	#about .card-list .card a .icon {
		width: 108px;
		height: 108px;
		margin: 0 auto 18px;
	}
	#about .card-list .card a .ttl {
		font-size: 26px;
		margin-bottom: 15px;
	}
	#about .card-list .card .textarea {
		font-size: 16px;
	}
	#about .deco-robot {
		width: 148px;
		right: 50px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#about .inner {
		position: relative;
	}
	#about .ttl-wrap {
		margin: 0 auto 4vw;
	}
	#about .ttl-wrap h2 {
		width: 88.53vw;
		margin: 0 auto 4vw;
	}
	#about .ttl-wrap .sub-text {
		font-size: 4vw;
	}
	#about .card-list .card a {
        width: 44.67vw;
        min-height: 53.33vw;
        padding: 3.33vw 4vw;
        border-radius: 12px;
        margin-bottom: 5.33vw;
	}
	#about .card-list .card a .icon {
		width: 12vw;
		height: 12vw;
		margin: 0 auto 2.67vw;
	}
	#about .card-list .card a .ttl {
		font-size: 4vw;
		margin-bottom: 2.67vw;
	}
	#about .card-list .card .textarea {
		font-size: 3.43vw;
	}
	#about .deco-robot {
		width: 18.67vw;
        right: 0;
        top: 18vw;
	}
}


/*------------------------
特長
------------------------*/
#features {
	background: #fffdf1 url(../img/feature_bg.png) top no-repeat;
	background-size: cover;
}
#features .feature-list .feature {
	border: 5px solid var(--yellow);
	background: #fff;
}
#features .feature-list .feature .image img {
	object-fit: cover;
}
#features .feature-list .feature .txt-wrap .point {
	font-weight: bold;
}
#features .feature-list .feature .txt-wrap .point span {
	display: inline-block;
}
#features .feature-list .feature .txt-wrap .desc {
	font-weight: 500;
}
#features .feature-list .feature .txt-wrap .btn a {
	background: #1499b9;
}
#features .robot {
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
}
/* PC */
@media screen and (min-width:768px) {
	#features .inner {
		padding: 70px 0 100px;
		position: relative;
	}
	#features .ttl-wrap {
		width: 328px;
		margin: 0 auto 40px;
	}
	#features .feature-list {
		margin-bottom: 30px;
	}
	#features .feature-list .feature {
		display: flex;
		padding: 50px;
		border-radius: 30px;
		margin-bottom: 30px;
	}
	#features .feature-list .feature:nth-child(2n){
		flex-direction: row-reverse;
	}
	#features .feature-list .feature .txt-wrap .point {
		font-size: 24px;
		line-height: 1;
		margin-bottom: 20px;
	}
	#features .feature-list .feature .txt-wrap .point span.num {
		width: 145px;
		margin-right: 5px;
	}
	#features .feature-list .feature .txt-wrap .desc {
		font-size: 18px;
		margin-bottom: 25px;
	}
	#features .feature-list .feature .txt-wrap .btn a {
		width: 280px;
		height: 65px;
		font-size: 17px;
	}
	#features .feature-list .feature .image {
		width: 400px;
		height: 280px;
		margin-left: 40px;
	}
	#features .feature-list .feature:nth-child(2n) .image{
		margin-left: 0;
		margin-right: 40px;
	}
	#features .feature-list .feature .image img {
		border-radius: 20px;
	}
	#features .feature-list .feature .txt-wrap {
		flex: 1;
	}
	#features .robot {
		width: 205px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#features .inner {
		position: relative;
	}
	#features .ttl-wrap {
		width: 50vw;
		margin: 0 auto 4vw;
	}
	#features .feature-list {
		margin-bottom: 5.33vw;
	}
	#features .feature-list .feature {
        padding: 5.33vw;
        border-radius: 18px;
        margin-bottom: 5.33vw;
        border: 3px solid var(--yellow);
		display: flex;
        flex-direction: column;
	}
	#features .feature-list .feature .txt-wrap{
		display: contents;
	}
	#features .feature-list .feature .txt-wrap .point {
		font-size: 4.27vw;
		line-height: 1;
		margin-bottom: 2.67vw;
		order: 1;
	}
	#features .feature-list .feature .txt-wrap .point span {
        width: 20.27vw;
        display: block;
        margin-bottom: 1.33vw;
	}
	#features .feature-list .feature .txt-wrap .point span.pc{
		display: none;
	}
	#features .feature-list .feature .txt-wrap .desc {
        font-size: 3.43vw;
        margin-bottom: 4vw;
        order: 2;
	}
	#features .feature-list .feature .txt-wrap .btn{
		order: 4;
	}
	#features .feature-list .feature .image {
		height: 57.33vw;
		margin-bottom: 4vw;
		order: 3;
	}
	#features .feature-list .feature .image img {
		border-radius: 12px;
	}
	#features .robot {
        width: 75px;
        top: 20px;
        right: -4vw;
        bottom: auto;
	}
}


/*------------------------
イベント
------------------------*/
#event-info {
	background: var(--green) url(../img/event_bg.png) no-repeat top left;
	background-size: auto;
}
#event-info .sub-text {
	text-align: center;
	color: #fff;
	font-weight: 500;
}
#event-info .event-list .event {
	background: #fff;
	height: auto;
}
#event-info .event-list .event .image-wrap {
	position: relative;
}
#event-info .event-list .event .cat {
	background: var(--orange);
	color: #fff;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	position: absolute;
	bottom: 0;
	left: 0;
}
#event-info .event-list .event .txt-wrap .ttl {
	letter-spacing: 0;
	font-weight: bold;
	line-height: 1.3;
}
#event-info .event-list .event .txt-wrap .date {
	background: var(--yellow);
	font-weight: bold;
}
#event-info .inner::after{
	content: "";
	background: url(../img/event_robot.png) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0;
	left: 0;
}
#event-info .event-list .event .image img {
	border-radius: 12px 12px 0 0;
	object-fit: cover;
	object-position: center top;
}
/* PC */
@media screen and (min-width:768px) {
	#event-info .inner {
		padding: 70px 0 100px;
		position: relative;
	}
	#event-info .inner::after{
		width: 184px;
		height: 240px;
	}
	#event-info .ttl-wrap {
		margin-bottom: 40px;
	}
	#event-info .ttl-wrap h2 {
		width: 340px;
		height: auto;
		margin: 0 auto 25px;
	}
	#event-info .sub-text {
		font-size: 18px;
	}
	#event-info .event-list {
		display: flex;
		align-items: stretch;
		margin-block: 40px;
	}
	#event-info .event-list .event {
		border-radius: 12px;
		width: 380px;
		margin-right: 30px;
	}
	#event-info .event-list .event:last-child{
		margin-right: 0;
	}
	#event-info .event-list .event .image {
		height: 253px;
	}
	#event-info .event-list .event .cat {
		font-size: 16px;
		height: 30px;
		padding: 0 12px;
		border-radius: 0 5px 0 0;
	}
	#event-info .event-list .event .txt-wrap {
		padding: 20px;
	}
	#event-info .event-list .event .txt-wrap .ttl {
		font-size: 20px;
		margin-bottom: 8px;
	}
	#event-info .event-list .event .txt-wrap .textarea {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		margin-bottom: 10px;
	}
	#event-info .event-list .event .txt-wrap .date {
		font-size: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#event-info{
		background: var(--green) url(../img/event_bg.png) no-repeat top left;
		background-size: 60%;
	}
	#event-info .inner {
		position: relative;
	}
	#event-info .inner::after{
        width: 19.73vw;
        height: 24vw;
        top: 13.33vw;
        left: -4vw;
	}
	#event-info .ttl-wrap {
		margin-bottom: 4vw;
	}
	#event-info .ttl-wrap h2 {
        width: 58.27vw;
        height: auto;
        margin: 0 auto 4vw;
	}
	#event-info .sub-text {
		font-size: 4vw;
	}
	#event-info .event-list .event {
        border-radius: 12px;
        width: 100%;
        margin-bottom: 4vw;
	}
	#event-info .event-list .event .image {
        height: 61.33vw;
	}
	#event-info .event-list .event .cat {
        font-size: 3.2vw;
        height: 6vw;
        padding: 0 2.67vw;
        border-radius: 0 5px 0 0;
	}
	#event-info .event-list .event .txt-wrap {
        padding: 4vw;
	}
	#event-info .event-list .event .txt-wrap .ttl {
        font-size: 4.27vw;
        margin-bottom: 2.67vw;
	}
	#event-info .event-list .event .txt-wrap .textarea {
        font-size: 3.43vw;
        font-weight: 500;
        line-height: 1.3;
        margin-bottom: 2.67vw;
	}
	#event-info .event-list .event .txt-wrap .date {
        font-size: 3.73vw;
        padding: 1.33vw 2.67vw;
        border-radius: 5px;
	}
}


/*------------------------
教室案内
------------------------*/
#access {
	background: #fff url(../img/access_bg.png) no-repeat top left;
	background-size: auto;
}
#access .inner::after{
	content: "";
	background: url(../img/access_robot.png) no-repeat;
	background-size: contain;
	position: absolute;
}
#access .facilities {
	background: #fbf7dc;
}
#access .facilities h3 {
	color: #fff;
	background: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
}
#access .facility-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#access .facility-list .facility{
	background: #fff;
	border: 3px solid var(--yellow);
	display: flex;
	justify-content: space-between;
}
#access .facility-list .facility .txt-wrap {
	flex: 1;
}
#access .facility-list .facility .txt-wrap .name {
	line-height: 1;
	font-weight: bold;
}
#access .facility-list .facility .txt-wrap .station {
	font-weight: 600;
}
#access .facility-list .facility .txt-wrap .station span {
	color: var(--orange);
}
#access .note {
	text-align: center;
	font-weight: bold;
}
/* PC */
@media screen and (min-width:768px) {
#access .inner {
	padding: 70px 0 100px;
	position: relative;
}
#access .inner::after{
	width: 164px;
	height: 248px;
	top: 35px;
	right: 120px;
}
#access .ttl-wrap {
	width: 144px;
	height: auto;
	margin: 0 auto 60px;
}
#access .facilities {
	padding: 70px 50px 20px;
	border-radius: 15px;
	margin-bottom: 30px;
}
#access .facilities h3 {
	width: 224px;
	height: 58px;
	font-size: 26px;
	letter-spacing: .04em;
	margin: -90px auto 30px;
	border-radius: 40px;
}
#access .facility-list .facility{
	width: 530px;
	padding: 15px 20px 20px;
	border-radius: 15px;
	margin-bottom: 30px;
	position: relative;
}
#access .facility-list .facility .txt-wrap{
	padding-top: 10px;
}
#access .facility-list .facility .txt-wrap .name {
	font-size: 22px;
	margin-bottom: 15px;
}
#access .facility-list .facility .txt-wrap .station {
	font-size: 17px;
}
#access .facility-list .facility .txt-wrap .station span {
	margin-right: 10px;
}
#access .facility-list .facility .image {
	width: 150px;
	height: 110px;
	margin-left: 15px;
}
#access .facility-list .facility .image img {
	object-fit: cover;
	border-radius: 8px;
}
#access .note {
	font-size: 20px;
	margin-bottom: 30px;
}
#access .btn {
	display: block;
}
#access .btn a {
	background: var(--blue);
	width: 360px;
	height: 70px;
	font-size: 20px;
	position: relative;
	margin: 0 auto;
}

}

/* SP */
@media screen and (max-width:767px) {
#access {
    background: #fff url(../img/access_bg.png) no-repeat top left;
    background-size: 140%;
}
#access .inner {
	position: relative;
}
#access .inner::after{
	content: none;
}
#access .ttl-wrap {
	width: 24.27vw;
	height: auto;
	margin: 0 auto 10.33vw;
}
#access .facility-list{
	display: block;
}
#access .facilities {
	padding: 5.33vw 4vw;
	margin: 0 -4vw 4vw;
}
#access .facilities h3 {
	width: 32vw;
	height: 9.07vw;
	font-size: 4.8vw;
	letter-spacing: .04em;
	margin: -10.13vw auto 4vw;
	border-radius: 40px;
}
#access .facility-list .facility {
	padding: 3.33vw 4vw;
	border-radius: 12px;
	margin-bottom: 2.67vw;
	position: relative;
}
#access .facility-list .facility .txt-wrap{
	padding-top: 1.33vw;
}
#access .facility-list .facility .txt-wrap .name {
	font-size: 4.27vw;
	margin-bottom: 2.67vw;
}
#access .facility-list .facility .txt-wrap .station {
	font-size: 3.43vw;
}
#access .facility-list .facility .txt-wrap .station span {
	margin-right: 2.67vw;
}
#access .facility-list .facility .image {
        width: 29.33vw;
        height: 21.6vw;
        margin-left: 2.67vw;
}
#access .facility-list .facility .image img {
	object-fit: cover;
	border-radius: 8px;
}
#access .note {
	font-size: 4.27vw;
	margin-bottom: 4vw;
}
#access .btn a {
	background: var(--blue);
}
}


/*------------------------
お問い合わせ
------------------------*/
#contact {
	background: var(--blue);
}
#contact .inner {
	background: #fff;
	position: relative;
}
#contact .inner::after{
	content: "";
	background: url(../img/contact_robot.png) no-repeat;
	background-size: contain;
	position: absolute;
}
#contact .contact-wrap .block p {
	font-weight: bold;
	line-height: 1;
}
/* PC */
@media screen and (min-width:768px) {
#contact {
	padding: 40px 0;
}
#contact .inner {
	padding: 40px 150px 60px;
	border-radius: 30px;
}
#contact .inner::after{
	width: 105px;
	height: 195px;
	left: 20px;
	bottom: -55px;
}
#contact .ttl-wrap {
	width: 192px;
	margin: 0 auto 30px;
}
#contact .contact-wrap {
	display: flex;
	justify-content: space-between;
}
#contact .contact-wrap .block{
	width: 400px;
	position: relative;
}
#contact .contact-wrap .block p {
	font-size: 20px;
	margin-bottom: 15px;
}
#contact .contact-wrap .line-block::before{
	content: "";
	width: 1px;
	height: 100%;
	background: var(--black);
	position: absolute;
	left: -50px;
}
#contact .contact-wrap .line-block .image.qr {
	width: 194px;
	height: 143px;
	position: absolute;
	top: -120px;
	right: -70px;
}
}

/* SP */
@media screen and (max-width:767px) {
#contact {
	padding: 8vw 0;
}
#contact .inner {
	padding: 5.33vw 4vw 6vw;
	border-radius: 20px;
}
#contact .inner::after{
	width: 14.67vw;
	height: 26.13vw;
	left: -2vw;
	top: -5.33vw;
}
#contact .ttl-wrap {
	width: 34.27vw;
	margin: 0 auto 5.33vw;
}
#contact .contact-wrap {
}
#contact .contact-wrap .block{
	position: relative;
}
#contact .contact-wrap .block:not(:last-child){
	margin-bottom: 5.33vw;
}
#contact .contact-wrap .block p {
	font-size: 4.27vw;
	letter-spacing: 0;
	margin-bottom: 3.43vw;
}
#contact .contact-wrap .line-block .image.qr {
	display: none;
}
}



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

------------------------*/
/* PC */
@media screen and (min-width:768px) {
}

/* SP */
@media screen and (max-width:767px) {
}