@charset "utf-8";

/*------------------------------------------------------------------
	IDENTIFICATION DIVISION.
	Version.												1.4.1.2;
	PROGRAM-ID.									"BLUEBERRY"
-------------------------------------------------------------------*/

/*****************************************************
	DATA DIVISION.
	WORKING-STRAGE SECTION.
*****************************************************/



/*****************************************************
	PROCEDURE DIVISION.
*****************************************************/
main{
	font-size:2rem;
}
main h3{
	margin-bottom:0.5em;
	padding:0.5em 1em;
	font-size:2.4rem;
	color:#fff;
	background:#69a45b;
	font-family: "Kiwi Maru", serif;
}


main .note{
	padding:0.3em 0.8em;
	background:#d7e7b9;
	box-sizing:border-box;	
}
main .division:not(last-child){
	margin-bottom:2em;
}
main .division h4{
	margin-bottom:0.8em;
	padding:0.5em 1em;
	color:var(--secondary-color);
	background:#e5ebe0;
	font-family: "Kiwi Maru", serif;
}

main section em{
	color:var(--bold-color);
}

main p.image{
	max-width:100%;
	overflow:hidden;
}
main p.image img{
	max-width:100%;
}

main ul.list{

}
main ul.list li{
	padding-left:1em;
	text-indent:-1em;
}
main ul.list li::before{
	content:"";
	width: 0.5em;
	height:0.5em;
	margin-right:0.5em;
	border-radius:50%;
	display:inline-block;
	background:#69a45b
}

main ul.list li:not(:nth-last-child){
	margin-bottom:0.5em;
}

main p.accent img{
	width:100%;
	height:400px;
	object-fit:cover;
	border-radius:40px;
}

/*-------------------------------------------------------------------
	ripe
-------------------------------------------------------------------*/
.ripe .image{
	display:flex;
	justify-content:space-between;
	gap:10px;
}
.ripe .image li:nth-child(1){
	flex:3;
}

.ripe .image li:nth-child(2){
	flex:2;
}

.ripe .image img{
	width:100%;
	height:400px;
	object-fit:cover;
}

/*-------------------------------------------------------------------
	about
-------------------------------------------------------------------*/
.about .note{
	position:relative;
	padding:2em;
	padding-bottom:120px;
	background-color:rbg(146 197 56 /0.23);
	background-image:url(../../images/blueberry/grass.svg);
	background-repeat:repeat-x;
	background-position:50% 103%;
	background-size:60%;
}
.about .note::after{
	content:"";
	display:block;
	position:absolute;
	bottom:10px;
	right:10px;
	width:145px;
	height:120px;
	background:url(../../images/blueberry/note-about.png) no-repeat top left;
	background-size:contain;
	opacity:0.8;
}

.about .image img{
	width:100%;
	height:400px;
	object-fit:cover;
}

/*-------------------------------------------------------------------
	opean
-------------------------------------------------------------------*/
.open .image img{
	width:100%;
	height:400px;
	object-fit:cover;
}

/*-------------------------------------------------------------------
	notice
-------------------------------------------------------------------*/
section.notice{

}
section.notice ul{
	margin-bottom:1em;
	padding-left:1em;
	box-sizing:border-box;
}
section.notice ul li{
	list-style-type:disc;
	box-sizing:border-box;
}
section.notice ul li:not(last-child){
	margin-bottom:0.3em;
}


/*-------------------------------------------------------------------
	howto
-------------------------------------------------------------------*/
#howto .btn{
	margin-left:auto;
	margin-right:auto;
	color:#fff;
	background:#f3a537;
	width:90%;
}
#howto .btn a{
	padding:1.5em;
}

#howto .btn a:link,
#howto .btn a:visited,
#howto .btn a:hover{
	color:#fff;
}


/*-------------------------------------------------------------------
	access
-------------------------------------------------------------------*/
section.access{

}

section.access h2{
	text-align:center;
}

section.access p.image{
	border-radius:40px;
}


section.access dl{
	margin-bottom:2em;
	color:var(--primary-color);
	font-family: "Kiwi Maru", serif;
}
section.access dt{
	font-size:3rem;
}

section.access .btn{
	margin:0 auto;
	max-width:90%;
	width:500px;
	background:var(--primary-color);
}

section.access .btn a{
	color:#fff;
}
section.access .btn a::after{
	position:relative;
	top:0.2em;
	left:0.8em;
	content:"";
	display:inline-block;
	width:1em;
	height:1.2em;
	background:url(../../images/common/icon/pin.svg) no-repeat top center;
	background-size:contain;
	transition:all 0.4s ease;
}

section.access .btn a:hover::after{
	transform:rotateY(180deg);
}

/*-------------------------------------------------------------------
	traffic
-------------------------------------------------------------------*/
.traffic .image img{
	width:100%;
	height:400px;
	object-fit:cover;
}



@media only screen and (max-width : 784px) {
main p.accent img{
	height:250px;
}

/*-------------------------------------------------------------------
	about
-------------------------------------------------------------------*/
.about .note{
	padding:1em;
	padding-bottom:100px;
	background-position:50% 100%;
}
.about .note::after{
	bottom:10px;
	right:10px;
	width:100px;
	height:90px;
}

/*-------------------------------------------------------------------
	ripe
-------------------------------------------------------------------*/

.ripe .image img{
	height:300px;
}

/*-------------------------------------------------------------------
	opean
-------------------------------------------------------------------*/
.open .image img{
	height:600px;
}

/*-------------------------------------------------------------------
	access
-------------------------------------------------------------------*/
section.access{

}
section.access dd{
	font-size:90%;
}


section.access .btn{
	margin:0 auto;
	max-width:90%;
}
section.access .btn a{
	font-size:80%;
}

}