@charset "utf-8";

html {
	font-size: 62.5%;
	scroll-behavior: smooth;

	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
	background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background: #666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
	font-size: 1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
	padding: 0;
}


header {
	background-color: #fff;
	width: 100%;
	text-align: center;
}

header h1 img {
	width: 90%;
	margin: 0px auto;
	padding: 10% 0 5% 0;
	box-sizing: border-box;
}

header h2 {
	font-size: calc(100vw / 30);
	padding-bottom: 6%;
	margin-bottom: 2rem;
	color: #000;
	font-weight: bolder;
	letter-spacing: 0.1em;
}


/* ヘッダー固定時ページ用 */
#fixheader {
	/*fixedで上部固定*/
	position: fixed;
	height: 50px;
	width: 100%;
	z-index: 999;
	/*最前面へ*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	text-align: center;
	padding: 10px;
}

#fixheader h3 {
	width: 150px;
	text-align: left;
}

#fixheader nav ul.g-navi {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	line-height: 40px;
	font-size: 1.4rem;
	font-weight: bold;
}

#fixheader nav ul.g-navi li a{
	display: block;
	margin-left: 1rem;
	padding: 0.5rem;
}

#fixheader nav ul.g-navi li a:hover{
	color:#0b27ff;
}


/*　fixheader　load時　*/
#fixheader.menuload {
	top: -70px;
}

/*　fixheader上に上がる動き　*/
#fixheader.UpMove {
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-100px);
	}
}

/*　下に下がる動き　*/
#fixheader.DownMove {
	top: -0px;
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


main h3 {
	font-size: calc(100vw / 15);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	padding: 5rem 0 4.5rem;
	color: #888;
}

main h3 span{
	display: block;
	font-size: 1.4rem;
	font-weight: 500;
	color: #666;
}

p {
	font-size: 1.4rem;
	line-height: 1.8;
	margin-bottom: 1.5rem;
}

section#appset {
	background-color: #f0f0f0;
	padding: 1.5rem 0;
}

div.appset_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	max-width: 95%;
}

div.appset_box article {
	margin: 0 0.75rem 1rem 0.75rem;
	width: 20%;
	max-width: 100px;
	text-align: center;
}

div.appset_box article h1 {
	font-size: 1rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.appset_box article img {
	width: 100%;
	box-sizing: border-box;
	border-radius: 20%;
	border: 3px #fff solid;
}



section#infoset {
	width: 100%;
	height: auto;
	overflow: auto;
	margin: 0px auto;
	padding: 1.5rem 0;
	background-color: #dfdcdc;
}


section#infoset dl {
	margin: auto;
	font-size: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 90%;
	max-width: 1200px;
	margin-bottom: 4rem;
	border-top: 1px dotted #999;
}

section#infoset dt {
	padding: 2rem 1rem 0rem;
	font-weight: bold;
	line-height: 1.8;
	color: #666;
	width: 100%;
}

section#infoset dd {
	padding: 1rem 1rem;
	line-height: 1.8;
	width: 100%;
	border-bottom: 1px dotted #333;
}

section#infoset dl a,
section#infoset dl a:visited{
	color: #0b27ff;
} 
section#infoset dl a:hover{
	color: #7687e9;
} 

footer {
	width: 100%;
	color: #666;
	text-align: center;
	border-top: 5px solid #000;
	background-color: #222;
	color: #FFF;
	padding: 3.5rem 0 3rem 0;
}

footer a {
	color: #FF0;
}

footer section {
	text-align: center;
	margin: 2rem 0;
}

footer h1 {
	font-size: 2rem;
	font-weight: bold;
	color: #FFF;
	white-space: nowrap;
	letter-spacing: 0.05em;
}

footer h4 {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 3rem 0 1rem 0;
	letter-spacing: 0.05em;
}

footer p,
footer ul {
	font-size: 1.3rem;
	line-height: 1.7;
	letter-spacing: 0.05em;
}


.sns_icon li {
	display: inline-block;
	margin: 0.5rem;
}

.sns_icon a {
	display: inline-block;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	text-align: center;
}

.sns_icon a:hover {
	opacity: .8;
}

.sns_icon a:hover {
	opacity: .5;
}

.sns_icon img {
	width: 20px;
	height: 20px;
	margin: 5px 0 0 0px;
	vertical-align: bottom;
}

.sns_tw a {
	background: #00b0ed;
}

.sns_fb a {
	background: #3b5998;
}

.sns_ins a {
	background: #a88269;
}

.sns_youtube a {
	background: #cb2027;
}

.sns_apple a {
	background: #aaa;
}

.sns_android a {
	background: #0f0;
}

footer .copyright {
	padding-top: 2rem;
	line-height: 0;
}




/*　タブレットのスタイル　*/

@media all and (min-width: 480px) {

main h3 {
	font-size: calc(100vw / 25);
}

	div.appset_box article h1 {
		font-size: 1.2rem;
	}

	section#infoset dl dt {
		padding: 2rem 1rem;
		width: 100px;
		border-bottom: 1px solid #999;
		margin-right: 1px;
	}

	section#infoset dl dd {
		padding: 2rem 1rem;
		width: calc(100% - 103px);
		border-bottom: 1px dotted #999;
	}


	div.appset_box {
		max-width: 96%;
		justify-content: center;
	}

	div.appset_box article {
		margin: 1.9rem;
	}



	footer div#footer_box {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto;
	}

	footer #footer_box {
		width: 90%;
	}

	footer section {
		text-align: left;
		margin: 0rem;
	}

	footer section.footer_address {
		width: 20%;
	}

	footer section.footer_contact,
	footer section.footer_sns {
		width: 18%;
	}

	footer p,
	footer ul {
		font-size: 1.2rem;
	}

	footer h4 {
		margin: 0 0 1rem 0;
	}

}




/* プライバシーページ用 */

.privacyset {
	width: 90%;
	max-width: 900px;
	margin: 0 auto 5rem auto;
	text-align: left;
}

.privacyset h1 {
	font-size: 1.8rem;
	font-weight: 800;
	margin: 3rem 0 2rem 0;
	padding: 0;
}

.privacyset h2 {
	font-size: 1.6rem;
	font-weight: 800;
	padding: 2rem 0 1rem 0;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1rem;
}

.privacyset h3 {
	color: #333;
	text-align: left;
	font-size: 1.4rem;
	font-weight: 800;
	padding: 0 0 1rem 0;
}

.privacyset ul {
	width: 95%;
	margin: 0 auto 3rem auto;
}

.privacyset li {
	font-size: 1.4rem;
	line-height: 1.8;
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 1.8rem;
}

.privacyset p {
	font-size: 1.4rem;
	line-height: 1.6;
	text-align: justify;
	margin-bottom: 2rem;
	word-break: break-all;
}

.backhome p {
	margin: 4rem auto;
	text-align: center;
	font-weight: bolder;
	font-size: 1.6rem;
	line-height: 2;
	border-radius: 2px;

}

.backhome a {
	display: inline-block;
	border: 2px solid #5567f3;
	border-radius: 9999px;
	padding: 10px 15px;
	margin: 0 auto;
	background-color: #fff;
	color: #5567f3;
	text-decoration: none;
}

.backhome a:hover {
	background-color: rgb(243, 243, 187);
	text-decoration: none;
}

.t_al {
	text-align: left;
}