@charset "UTF-8";
body { font-size: 16px; font-family: "Noto Sans JP", serif; color: black; position: relative; padding: 1em; }
.clearfix { min-height: 1px; }
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
img { border: none; max-width: 100%; vertical-align: bottom; }
p { margin: 0; padding: 0; }
.pc-hid { display: none; }
.sm-hid { display: block; }
a:hover { opacity: 0.9; }
a img:hover { -moz-opacity: 0.9; opacity: 0.9; filter: alpha(opacity=90); }

/*ヘッダー
-----------------------------------*/
/*MAIN
-----------------------------------*/
main { 
	position: relative; 
	margin: 3em auto; 
	width: 100%; 
	max-width: 1200px; 
	min-width: 800px; 
	text-align: center; 
	/* background: #fff; */ 
	padding: 0em 2em 4em; 
	box-sizing: border-box; 
	/* border: solid 8px #FFF400; 
	background: url(../img/bg2min.png) no-repeat center center fixed; 
	background-size: 100% 100%; */
}

h1 { margin-top: 0; }
.bg { 
	width: 100%; 
	height: 100%; 
	background: url(../imgs/common/bg_hanamaru_02.jpg) no-repeat center center; 
	background-size: cover; 
	position: fixed; 
	left: 0; 
	top: 0;
	z-index: 0;
}

.content1 {
	width:100%;
	padding: 1em 0 1em 0;
}
.content1 img {
	width: 95%;
}

.content1 span {
	font-size: 15px;
}

.content3 {
	padding-top: 15px;
}

.content3 span {
	font-size: 15px;
}

.img1 { width: 80%; margin: auto; text-align: center; }
.tit1 { margin: 5em auto 1em; }
.rank1-box { box-shadow: 3px 4px 2px #000; width: 80%; margin: auto; }
.rank1 { 
	background-color: #fff; 
	padding: 1em; 
	margin: auto; 
	border: solid 5px transparent; 
	border-image: url("../img/line1.jpg"); 
	border-image-slice: 1; 
	border-image-repeat: stretch; 
	color: #000; 
	position: relative; 
	display: table; 
	width: 100%; 
	box-sizing: border-box; 
}
.rank1 .rank1a { position: absolute; top: -30px; left: -90px; width: 200px; }
.rank1 .text-box1 { display: table-cell; width: 58%; text-align: left; vertical-align: middle; padding-left: 7%; box-sizing: border-box; }
.rank1 .text-box1 p { background-color: #ff1c9c; border-radius: 100px; text-align: center; color: #fff; padding: 0.5em; }
.rank1 .text-box1 h2 { font-size: 40px; font-weight: bold; margin: 10px; }
.rank1 .text-box2 { display: table-cell; width: 38%; vertical-align: middle; text-align: right; }
.rank1 .text-box2 img { width: 200px; }

.main-title-honki { z-index: 5; animation: title-tan 0.3s ease-in; -webkit-animation: title-tan 0.3s ease-in forwards; animation-delay: 1.0s; opacity: 0; }

@media all and (-ms-high-contrast: none) { .main-title-honki { opacity: 1; } }
/* ドンッ */
@keyframes title-tan { 
	0% { opacity: 0; transform: scale(2); }
	60% { opacity: 1; transform: scale(1); }
	80% { opacity: 1; transform: scale(1.2); }
	100% { opacity: 1; transform: scale(1); } 
}
/*==================================================
アコーディオンのためのcss
===================================*/
/*アコーディオン全体*/
.accordion-area { list-style: none; width: 80%; margin: 1em auto; }
.accordion-area li { margin: 2em auto; }
.accordion-area section { background-color: #fff; padding: 0; margin: auto; color: #000; position: relative; display: table; width: 100%; box-sizing: border-box; box-shadow: 3px 4px 2px #000; }
.accordion-area section.a1 { padding: 4px; text-align: center; background: linear-gradient(to right, #f3e793 0%, #6a4809 50%, #f3e793 99%); border-radius: 5px; }
.accordion-area section.a2 { padding: 4px; text-align: center; background: linear-gradient(to right, #efefef 0%, #4e4e4e 50%, #efefef 100%); border-radius: 5px; }
.accordion-area section.a3 { padding: 4px; text-align: center; background: linear-gradient(to right, #be7d00 0%, #5f4105 50%, #be7d00 99%); border-radius: 5px; }
.accordion-area section.a4 { padding: 4px; text-align: center; background: linear-gradient(to right, #1137a0 0%, #1137a0 50%, #1137a0 99%); border-radius: 5px; }
.accordion-area section.a5 { padding: 4px; text-align: center; background: linear-gradient(to right, #1137a0 0%, #1137a0 50%, #1137a0 99%); border-radius: 5px; }

/*アコーディオンタイトル*/
.title { 
	position: relative; 
	cursor: pointer; 
	font-size: 1rem; 
	text-align: left; 
	display: block; 
	font-weight: normal; 
	margin: 0; 
	padding: 2em 3em 2em 10%; 
	transition: all .5s ease; 
	background-color: #fff; 
}
.title .rank1a { position: absolute; top: -20px; left: -70px; width: 160px; }
.title .title-sub { width: 70%; }
.title p { background-color: #ff1c9c; border-radius: 100px; text-align: center; color: #fff; padding: 0.5em; }
.title h2 { font-size: 40px; font-weight: bold; margin: 10px; text-align: center; margin-bottom: 0.5em; }
.title .rank1b { position: absolute; right: -20px; width: 200px; top: -10px; }

/*アイコンの＋と×*/
.title::before {
	position: absolute; 
	content: ''; 
	width: 100%; 
	height: 12px; 
	bottom: 0px; 
	left: 0; 
	right: 0; 
	margin: auto; 
	background: url(../img/icon1.png) no-repeat center center; 
	background-color: #feeeee; 
	padding: 10px; 
	box-sizing: border-box;
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before { 
	transform: rotate(180deg);
}

/*アコーディオンで現れるエリア*/
.box { 
	display: none; /*はじめは非表示*/ 
	background: #fff; 
	margin: 0; 
	padding: 3% 2%; 
}

.scroll-table { overflow-x: auto; padding-bottom: 5px; }
.scroll-table table { margin: 0; border: none; }

.tbl-r02 { width: 100%; }
.tbl-r02 th { background: #0b36b9; border: solid 3px #fff; color: #fff; padding: 10px; font-size: 16px; text-align: left; vertical-align: middle; }
.tbl-r02 th.t1 { background: #ff1c9c; }
.tbl-r02 th img { vertical-align: middle; width: 35px; }
.tbl-r02 tr { border-bottom: 1px solid black; text-align: left; }
.tbl-r02 td { font-weight: bold; padding: 6px 0; font-size: 16px; vertical-align: middle; }
.tbl-r02 td.bg1 { background-color: #ffe5f5; }
.tbl-r02 td.bg1 ul { font-size: 0; }
.tbl-r02 td.bg1 li { display: inline-block; width: 33.3%; font-size: 16px; text-align: center; padding: 0.5em 0.2em; box-sizing: border-box; border-right: solid 1px #000; }
.tbl-r02 td.bg1 li:last-child { border-right: none; }
.tbl-r02 td.bg1 li > span { font-size: 24px; }
.tbl-r02 td.bg1 > p { border-right: solid 1px #000; padding: 0.4em; text-align: center; }
.tbl-r02 td.bg1 > p span { font-size: 24px; }
.tbl-r02 td:nth-child(4) > p { border-right: none; }

.tbl-r03 { width: 100%; }
.tbl-r03 th { background: #ff1c9c; border: solid 3px #fff; color: #fff; padding: 10px; font-size: 14px; }
.tbl-r03 tr { border-bottom: 1px solid black; }
.tbl-r03 td { font-weight: bold; padding: 10px; font-size: 14px; }
.tbl-r03 td:nth-child(2) { text-align: left; }

.cont-box1 { 
	padding: 2em; 
	background-color: #fff; 
	border: solid 5px #1137a0; 
	width: 80%; 
	margin: 2em auto 0; 
	box-sizing: border-box; 
	box-shadow: 3px 4px 2px #000; 
	border-radius: 10px;
}

footer { 
	width: 100%; 
	text-align: center;
	position: relative; 
}
footer .logo a { display: block; margin: 1em auto 0; }
footer .copyright { font-weight: bold; font-size: 14px; margin-top: 1em; }
footer .shareList li { display: inline-block; }
footer .shareList a { display: block; padding: 0 0.5em; }
footer .shareList svg { fill: #062846; }

/* pc */
@media screen and (min-width: 800px) {
	footer { padding: 20px 0; }
	footer .logo a { width: 200px; }
	footer .logo a:hover { opacity: 0.7; }
	footer .shareList svg { width: 40px; height: 40px; }
	footer .shareList a:hover svg * { fill: #e61a13; } 
}
/* sp */
@media screen and (max-width: 800px) {
	footer { padding: 20px 0 10px; }
	footer .logo a { width: 50%; }
	footer .shareList svg { width: 30px; height: 30px; } 
	.content1 span {font-size: 10px;}
}
@media screen and (max-width: 640px) {
	.pc-hid { display: block; }
	.sm-hid { display: none; }
	main { min-width: 100%; margin: 1em auto; padding: 0em 0em 1em; }
	.content1 span {font-size: 10px;}
	.tit1 { margin: 2em auto 0em; width: 60%; }
	.title { padding: 0.6em 0.5em 1.5em; text-align: center; }
	.title .title-sub { width: 100%; }
	.title .rank1a { position: absolute; top: -20px; left: -30px; width: 80px; }
	.title .rank1b { right: -40px; width: 30%; padding: 0.5em 0 1em; top: 0; text-align: center; }
	.title p { font-size: 12px; }
	.title h2 { font-size: 18px; }
	.cont-box1 { padding: 1em 0.5em; width: 90%; }
	.tbl-r02 { width: 500px; }
	.tbl-r02 th { font-size: 14px; }
	.tbl-r02 td { font-size: 14px; box-sizing: border-box; vertical-align: middle; }
	.tbl-r02 td.bg1 > p { padding: 10px 10px 10px 0px; }
	.tbl-r02 td.bg1 li span { font-size: 18px; }
	.tbl-r02 td.bg1 > p span { font-size: 18px; }
	.accordion-area { width: 90%; }
	.title::before { background-size: 16px; }
	.tbl-r03 th, .tbl-r03 td { font-size: 12px; }
	.tbl-r02 th img { width: 26px; } 
	footer { padding: 20px 0 10px; }
	footer .logo a { width: 50%; }
}
/* end */