@charset "utf-8";

/*===============================================
●共通
===============================================*/
#mainImage ul li {
	position:relative;
}
#mainImage ul li span.image {
	width:100%;
	height:75%;
	display:inline-block;
	border:#fff 4px solid;
	border-radius:100% 80% 100% 70% / 120% 100% 90% 70%;
	box-sizing:border-box;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
#mainImage ul li span.image:after {
	content:"";
	display:block;
	width:100%;
	padding-top:75%;
}
#mainImage ul li .text {
	display:block;
	color:#000;
	font-weight:bold;
	position:absolute;
	bottom:5%;
	right:20%;
	text-shadow:0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* aboutContents
---------------------------------------- */
#aboutContents {
	background-color:#6eb963;
}
#aboutContents h1 {
	color:#ffff00;
}
#aboutContents .text {
	color:#fff;
	margin-bottom:1.5em;
}

/* topicsContents
---------------------------------------- */
#topicsContents {
	background:url(../../images/mainframe/tex_pink.gif) repeat center top / 250px 250px;
}
#topicsContents #comTable th {
	color:#ff0;
	font-size:1.8em;
	padding-left:36px;
	background:url(../../images/index/icon_note.png) no-repeat 10px center / 16px 22px #046fce;
	letter-spacing:-3px;
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	letter-spacing: 0.01em;
}
#topicsContents #comTable a {
	display:block;
	line-height:1.2em;
	padding:1em;
	text-decoration:none;
	background:url(../../images/mainframe/arrow_brown02.png) no-repeat 96% center / 16px 16px;
}

/* businessContents
---------------------------------------- */
#businessContents ul li {
	float:left;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* mainImage
	---------------------------------------- */
	#mainImage {
		position:relative;
		padding-bottom:3em;
		background-size:auto 72px!important;
	}
	#mainImage ul li {
		padding:0 7%;
	}
	#mainImage ul li .text {
		right:7%;
		padding-left:23%;
		text-align:right;
	}
	#mainImage #mainKarin {
		width:27%;
		position:absolute;
		bottom:0;
		left:-15px;
		z-index:1000;
	}

	/* topicsContents
	---------------------------------------- */
	#topicsContents {
		padding:2em 0;
	}
	#topicsContents #comTable {
		margin-bottom:1.5em;
	}
	#topicsContents #comTable th,
	#topicsContents #comTable td {
		display:block;
		width:100%;
		box-sizing:border-box;
	}
	#topicsContents #comTable td {
		border-bottom:#e4cdab 1px solid;
	}

	/* aboutContents
	---------------------------------------- */
	#aboutContents {
		padding:1.3em 0;
	}
	
	/* businessContents
	---------------------------------------- */
	#businessContents {
		padding-top:2em;
		background:url(../../images/mainframe/tex_balloon_sp.png) no-repeat center center / contain;
	}
	#businessContents ul li {
		width:48%;
	}
	#businessContents ul li:nth-child(1) {
		margin-right:4%;
	}
	#businessContents ul li:last-child {
		float:none;
		margin: 0 auto;
	}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* mainImage
	---------------------------------------- */
	#mainImage #mainImageInner {
		padding-bottom:7.5em;
	}
	#mainImage ul li {
		margin:0 5%;
		text-align:center;
	}
	#mainImage ul li .text {
		right:0;
	}
	#mainImage ul li .image {
		max-width:600px;
		margin:0 auto;
	}
	#mainImage #mainKarin {
		position:relative;
		width:100%;
		max-width:960px;
		margin:0 auto;
		box-sizing:border-box;
	}
	#mainImage #mainKarin img {
		display:block;
		width:25%;
		position:absolute;
		bottom:-6.8em;
		left:0;
		z-index:1000;
	}
	
	/* aboutContents
	---------------------------------------- */
	#aboutContents {
		padding:2.1em 0 3.1em;
	}
	#aboutContents .text {
		font-size:1.15em;
		text-align:center;
	}
	
	/* topicsContents
	---------------------------------------- */
	#topicsContents {
		padding:3.6em 0;
	}
	#topicsContents #comTable {
		margin-bottom:2em;
	}
	#topicsContents #comTable th {
		vertical-align:middle;
		padding-bottom:0.2em;
	}
	#topicsContents #comTable a {
		font-size:1.15em;
	}
	#topicsContents #comTable td {
		border-right:#e4cdab 1px solid;
	}
	#topicsContents #comTable a:hover {
		text-decoration:underline;
	}

	/* businessContents
	---------------------------------------- */
	#businessContents {
		padding:3.6em 0 7em;
		background:url(../../images/mainframe/tex_balloon.png) no-repeat center center / cover;
	}
	#businessContents ul {
		width:90%;
		margin:0 auto;
		display:flex;
		justify-content: space-evenly;
	}
	#businessContents ul li {
		width:30%;
		margin-right:5%;
		max-width:260px;
	}
	#businessContents ul li:last-child {
		margin-right:0;
	}
}

/*===============================================
●画面の横幅が860px以上(PCのみ)
===============================================*/
@media screen and (min-width: 860px){
	
	/* 全般
	---------------------------------------- */
}