@charset "utf-8";
/*==============================
トップページ
==============================*/

/*===============================================
●共通
===============================================*/

/* mainImage
---------------------------------------- */
#mainImage ul {
	width: 100%;
	height: 100%;
	position: relative;
}
#mainImage ul:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 53%;
}
#mainImage li:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 53%;
	position: absolute;
}
#mainImage li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#mainImage li:first-child {
	display: block;
	z-index: 3;
}
#mainImage li:nth-child(2) {z-index: 2;}
#mainImage li:nth-child(3) {z-index: 1;}
#mainImageWrap #verticalText {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#mainImageWrap #verticalText > span {
	background-color: rgba(255,255,255,0.9);
	line-height: 1em;
	color: #794913;
	display: table;
	letter-spacing: 0.1em;
}

/* topNews
---------------------------------------- */
#topNewsInner {
	position: relative;
	z-index: 100;
}
#topNews h2 span { position: absolute;}
#topNews #news01 .newsContents { background: url("../../images/index/newsBg01.png") no-repeat left center/ contain;}
#topNews #news02 .newsContents { background: url("../../images/index/newsBg02.png") no-repeat left center/ contain;}
#topNews .newsContents time {
	color: #794913;
	font-weight: bold;
}
#topNews .newsContents div {
	overflow: hidden;
	line-height: 1.4em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-height: 3em;
}

/* svg
---------------------------------------- */
/* iconNewsCloud */
.newsCloud_st1 { fill: #fff;}
.newsCloud_st2 { fill: #c4e3ff;}

/* iconBallon */
.balloon_st1 { fill: #fdd000;}
.balloon_st2 { fill: #0081cc;}
.balloon_st3 { fill: #5fa552;}
.balloon_st4 { fill: #f37477;}

/* iconPencil */
.pencil_st1 { fill :#eb6ea5;}
.pencil_st2 { fill: #fcd68c;}
.pencil_st3 { fill: #794913;}

/* iconCamera */
.camera_st1 { fill: #11825c;}
.camera_st2 { fill: #f0a650;}
.camera_st3 { fill: #205d85;}
.camera_st4 { fill: #fff;}
.camera_st5 { fill: #f2e023;}

/* leadWrap
---------------------------------------- */
#leadImage {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}
#leadImage:after {
	content: "";
	display: block;
	width: 100%;
}
#leadImage div { position: absolute;}
#leadTitle.fontShirokuma {
	color: #136BB2;
	text-align: center;
}
#leadWrap p {
	color: #794913;
	font-weight: bold;
}
#leadWrap p span:not(:last-child) {
	display: block;
	margin-bottom: 1.2em;
}
#leadWrap p span.largeText {
	font-size: 1.25em;
	display: inline;
	margin-bottom: 0;
}

/*linkWrap
---------------------------------------- */
#linkWrap a { display: block;}
#linkWrap .image {
	border-radius: 20px;
	position: relative;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	z-index: 1;
}
#linkWrap .image img {
	width: 100%;
	transition: transform 0.5s ease;
}
#linkWrap a:hover .image img { transform: scale3d(1.1, 1.1, 1.1);}
#linkWrap h3 {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	color: #136BB2;
	line-height: 1.7em;
	text-align: center;
	margin-bottom: 0.3em;
}
#linkWrap p {
	color: #794913;
	line-height: 1.43em;
}
#linkWrap .linkIcon {
	max-width: 72px;
	margin: -2em auto 0.7em;
}
#linkWrap .linkIcon img {
	background-color: #fff;
	border: 3px solid #FF641E;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}
#linkWrap a:hover .linkIcon img { opacity: 1;}
#linkWrap svg {
	width: 66px;
	height: 66px;
}

/*news
---------------------------------------- */
#news { background-color: #FFFCEF;}
#news section {
	background-color: #fff;
	border-radius: 30px;
	position: relative;
}
#news #leftBox,
#news #rightBox { position: relative;}
#news #leftBox a.newsLink,
#news #rightBox a.newsLink {
	position: absolute;
	right: 2em;
	bottom: 2em;
}
#news #leftBox { border: 4px solid #FF641E;}
#news #rightBox { border: 4px solid #136BB2;}
#news .listBox {overflow: auto;}
#news h2 { color: #794913;}

/* newsTitle */
#news .newsTitle {
	display: flex;
	align-items: center;
	z-index: 2;
	background: linear-gradient(#FFFCEF 50%, #ffffff 50%);
	padding: 0 0.8em 0 0.5em;
	position: absolute;
	left: 1.5em;
}
#news #leftBox .newsTitle svg {
	width: 27px;
	height: 43px;
}
#news .newsTitle span { padding-right: 0.3em;}
#news #rightBox .newsTitle span { margin-top: -1.5em;}
#news #rightBox .newsTitle svg {
	width: 60px;
	height: 66px;
}

/* newsList */
.newsList li {
	padding: 0.8em 0;
	margin-right: 0.8em;
}
.newsList li:not(:last-of-type) { border-bottom: 1px solid #C5C5C5;}
.newsList li a,
.newsLink { display: block;}
.newsLink { color: #794913!important;}
.newsList .newsText { line-height: 1.6em;}
.newsLink { text-align: right;}
.newsLink span { padding-left: 0.5em;}
.newsLink svg {
	fill: #794913;
	width: 6px;
	height: 9px;
}

/*===============================================
●画面の横幅が769px以下(スマホ)
===============================================*/
@media screen and (max-width: 769px){
	
	/* mainImage
	---------------------------------------- */
	#mainImageWrap {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#mainImage1 { background:url("../../images/index/mainImage01_sp.jpg");}
	#mainImage2 { background:url("../../images/index/mainImage02_sp.jpg");}
	#mainImage3 { background:url("../../images/index/mainImage03_sp.jpg");}
	#mainImage li:after { padding-top: 70%;}
	#mainImageWrap #verticalText {
		position: absolute;
		top: 10%;
		right: 5%;
		z-index: 30;
	}
	#mainImageWrap #verticalText > span {
		font-size: 1.8em;
		padding: 0.5em 0.2em 0.3em 0.2em;
	}
	#mainImageWrap #verticalText > span:not(:last-of-type) { margin-left: 0.5em;}
	#mainImageWrap #verticalText > span:nth-child(2) span:first-child { margin-top: -0.1em;}
	
	/* topNews
	---------------------------------------- */
	#topNewsInner {
		max-width: 480px;
		margin: 3em auto 0;
		background: url("../../images/index/topNewsBg.png") no-repeat center top / 94% auto ;
		z-index: 10;
	}
	#topNewsInner #topNews {
		max-width: 600px;
		margin: 0 auto;
	}
	#topNews .cloudBox {
		position: relative;
	}	
	#topNews .cloudBox .cloud { position: absolute;}
	#topNews .cloudBox:first-child { padding-top: 115px;}
	#topNews .cloudBox:first-child .cloud{ top: -120px;}
	#topNews .cloudBox:nth-child(2) { padding-top: 38%;}
	#topNews .cloudBox:nth-child(2) .cloud{ top: -60px;}
	#topNews #news01 { left: 1em;}
	#topNews #news02 { right: 0;}
	#topNews .newsContents {
		width: 260px;
		height: 150px;
	}
	#topNews #news01 .newsContents { padding: 4em 3.5em 0;}
	#topNews #news02 .newsContents { padding: 4.2em 0 0 3em;}
	#topNews .newsContents div {
		max-width: 170px;
		padding-top: 0.2em;
	}
	
	
	
	/* leadWrap
	---------------------------------------- */
	#leadWrap { margin: 0 0 2.8em;}
	#leadImage {
		background: url("../../images/index/leadBg_sp.jpg") no-repeat center center/ contain;
		max-width: 650px;
		margin: 0 auto;
	}
	#leadImage:after { padding-top: 95%;}
	#leadTitle.fontShirokuma {
		font-size: 2.57em;
		line-height: 1.2em;
		margin: 0.5em 0 0.3em;
	}
	#leadImage #circleImg01 {
		width: 28%;
		left: 0%;
		top: 26%;
	}
	#leadImage #circleImg02 {
		width: 20%;
		left: 28%;
		top: 8%;
	}
	#leadImage #circleImg03 {
		width: 27%;
		right: 15%;
		top: 12%;
	}
	#leadImage #circleImg04 {
		width: 19%;
		right: 0;
		top: 42%;
	}
	#leadWrap p { line-height: 1.72em;}
	
	/* linkWrap
	---------------------------------------- */
	#linkWrap {
		width: 95%;
		margin: 0 auto;
	}
	#linkWrap h3 { font-size: 1.43em;}
	#linkWrap section { margin-bottom: 3em;}
	#linkWrap .contents {
		width: 90%;
		margin: 0 auto;
	}
	
	/* news
	---------------------------------------- */
	#news { padding: 4.5em 0 4em;}
	#news section { padding: 2em 1.5em 4em;}
	#news #leftBox { margin-bottom: 5.5em;}
	#news .newsTitle { left: 2em;}
	#news #leftBox .newsTitle { top: -1.85em;}
	#news #rightBox .newsTitle { top: -2em;}
	#news .listBox { max-height: 450px;}
	.newsLink { margin-top: 0.5em;}
	
}

/*===============================================
●画面の横幅が770px以上(PC)
===============================================*/
@media screen and (min-width: 770px){
	
	/* mainImage
	---------------------------------------- */
	#mainImageWrap {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0 1em;
	}
	#mainImageWrap .mainImageInner {
		height: 100%;
		width: 100%;
		max-width: 2200px;
		margin: 0 auto;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
	#mainImage li {
		width: calc(100% - 2em);
		left: 1em;
	}
	#mainImageWrap #verticalText {
		position: absolute;
		top: 10%;
		right: 10em;
		z-index: 3;
	}
	#mainImageWrap #verticalText > span {
		font-size: 2.7em;
		padding: 0.4em 0.2em 0.2em 0.2em;
	}
	#mainImageWrap #verticalText > span:not(:last-of-type) { margin-left: 0.7em;}
	#mainImage1 { background: url("../../images/index/mainImage01.jpg");}
	#mainImage2 { background: url("../../images/index/mainImage02.jpg");}
	#mainImage3 { background: url("../../images/index/mainImage03.jpg");}
	
	/* topNews
	---------------------------------------- */
	#topNewsInner {
		width: 100%;
		max-width: 1120px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	#topNewsInner #topNews {
		position: absolute;
		bottom: 0;
	}
	#topNewsInner #topNews .cloudBox { position: relative;}
	#topNewsInner #topNews .cloudBox .cloud { position: absolute;}
	#topNews #news01 {
		bottom: -2em;
		left: 2em;
	}
	#topNews #news02 {
		bottom: 3em;
		left: 24em;;
	}
	#topNews #news01 .newsContents { padding: 5em 3.5em 0;}
	#topNews #news02 .newsContents { padding: 5.5em 3.5em 0;}
	#topNews .newsContents {
		width: 310px;
		height: 200px;
	}
	#topNews .newsContents div { padding-top: 0.3em;}
	#topNews a { transition: transform 0.5s ease;}
	#topNews a:hover,
	#topNews a:hover img { opacity: 1;}
	#topNews a.cloud:hover {
		transform: translateY(-15px);
		transition: all 0.3s;
		transition-duration: 0.5s;
	}
	
	/* leadWrap
	---------------------------------------- */
	#leadWrap { margin: 12% 0 8%;}
	#leadImage { background: url("../../images/index/leadBg_pc.jpg") no-repeat center center/ contain;}
	#leadImage:after { padding-top: 42%;}
	#leadImage #circleImg02,
	#leadImage #circleImg04 {
		max-width: 100px;
		width: 10%;
	}
	#leadImage #circleImg01 {
		max-width: 160px;
		width: 16%;
		left: 8%;
		top: 30%;
	}
	#leadImage #circleImg02 {
		left: 20%;
		bottom: 5%;
	}
	#leadImage #circleImg03 {
		max-width: 140px;
		width: 14%;
		right: 18%;
		bottom: 5%;
	}
	#leadImage #circleImg04 {
		right: 10%;
		top: 30%;
	}
	#leadTitle.fontShirokuma {
		font-size: 2.57em;
		line-height: 1.2em;
		position: relative;
		margin: -1% 0 2% 0;
	}
	#leadWrap p {
		line-height: 2em;
		max-width: 920px;
		margin: 0 auto;
	}
	
	/* linkWrap
	---------------------------------------- */
	#linkWrap {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#linkWrap section {
		max-width: 310px;
		width: 30%;
	}
	#linkWrap section { margin: 0 2% 6.7% 0;}
	#linkWrap section:nth-child(3n) { margin-right: 0;}
	#linkWrap .contents {
		max-width: 280px;
		margin: 0 auto;
	}
	#linkWrap h3 { font-size: 1.25em}
	
	/* news
	---------------------------------------- */
	#news { padding: 6% 0;}
	#news .flexBox {
		display: flex;
		justify-content: space-between;
	}
	#news section {
		max-width: 500px;
		width: 50%;
		padding: 2.2em 2em 4em;
	}
	#news .newsTitle { left: 1.5em;}
	#news #leftBox .newsTitle { top: -1.6em;}
	#news #rightBox .newsTitle { top: -1.8em;}
	#news #leftBox { margin-right: 5%;}
	#news .listBox { max-height: 540px;}
	.newsList .timeCat span {
		margin-left: 1em;
		padding: 0.15em 0.7em 0.1em;
	}
	.newsList .newsText { padding-top: 0.5em;}
	.newsLink { margin-top: 1em;}
	
}

/*===========================================================
●画面の横幅が920px以上770px以下
=============================================================*/
@media screen and (min-width: 770px) and (max-width: 920px) {
	
	/* mainImageWrap
	---------------------------------------- */
	#mainImageWrap #verticalText {right: 8em;}
	
	/* topNews
	---------------------------------------- */
	#topNews #news01 .newsContents { padding: 6.2em 5em 0;}
	#topNews #news02 .newsContents { padding: 6.5em 5em 0;}
	#topNews .newsContents time,
	#topNews .newsContents div { font-size: 1.14em;}
}