@charset "utf-8";

/*
	基礎となるstyle

*/
/* -----------------------------------------------
 html, body
-------------------------------------------------- */
* {
	box-sizing: border-box;
}
html, body {
	position: relative;
	margin: 0;
	line-height: 1.75em;
	text-align: left;
	color: #222;
	font-family: -apple-system, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
body {
	/* animation: fadein 0.5s forwards; */
}
html a, body a {
	color: #0a899b;
}
html a:hover, body a:hover,
html a:active, body a:active {
	color: #0fb3cb;
}
/* @keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
} */
	/* -------------------------------------------
		html, body > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		html, body {
			font-size: 16px;
		}
	}
	/* -------------------------------------------
		html, body > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		html, body {
			font-size: 16px;
		}
	}
	/* -------------------------------------------
		html, body > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		html, body {
			font-size: 17px;
		}
	}
	/* -------------------------------------------
		html, body > wide PC
	---------------------------------------------- */
	@media (min-width:1680px) {
		html, body {
			font-size: 18px;
		}
	}
/* -----------------------------------------------
  補助技術 (スクリーンリーダなど) を利用できるようにしながら、要素を視覚的に隠す
-------------------------------------------------- */
.visually-hidden {
	position: fixed !important;
	/* keep it on viewport */
	top: 0px !important;
	left: 0px !important;
	/* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
	before allowing buttons to be activated. */
	width: 4px !important;
	height: 4px !important;
	/* visually hide it with overflow and opacity */
	opacity: 0 !important;
	overflow: hidden !important;
	/* remove any margin or padding */
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	/* ensure no other style sets display to none */
	display: block !important;
	visibility: visible !important;
}
/* -----------------------------------------------
  Layout
-------------------------------------------------- */
.wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0 auto;
}

.inner,
.inner-wide {
	margin-right: auto;
	margin-left: auto;
}

img {
	max-width: 100%;
	height: auto;
}
.base-layout {
	/* background-color: red; */
}
.base-layout--back {
}
.base-layout--header {
	/* background-color: orange; */
}
.base-layout--main {
	/* background-color: yellow; */
}
.base-layout--footer {
	background-color: green;
}
.base-layout--main .main {
	height: 100%;
	background-color: #fefefe;
}
	/* -------------------------------------------
		Layout > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		.sp_none {
			display: none!important;
		}
		.inner-wide {
			width: calc(100% - 2rem);
		}
		.inner {
			width: calc(100% - 4rem);
		}
	}
	/* -------------------------------------------
		Layout > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		
	}
	/* -------------------------------------------
		Layout > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.base-layout {
			display: grid;
			grid-auto-flow: row dense; 
			grid-template-columns: 18rem calc(100% - 18rem);
			grid-template-rows: minmax(2rem, auto, auto);
			gap: 0px 0px; 
			grid-template-areas: 
				"back back"
			  "header main"
			  "fotter fotter"; 
		}
		.base-layout--back { grid-area: back; }
		.base-layout--header { grid-area: header; }
		.base-layout--main { grid-area: main; }
		.base-layout--footer { grid-area: fotter; }
		.sp_none {
			display: inherit!important;
		}
		.pc_none {
			display: none!important;
		}
		.inner-wide {
			width: 90%;
		}
		.inner {
			width: 80%;
		}
	}
	/* -------------------------------------------
		Layout > wide PC
	---------------------------------------------- */
	@media (min-width:1280px) {
		.base-layout {
			grid-template-columns: 20rem calc(100% - 20rem);
		}
	}
	@media (min-width:1360px) {
		.base-layout {
			grid-template-columns: 22rem calc(100% - 22rem);
		}
	}
	@media (min-width:1680px) {
		.base-layout {
			grid-template-columns: 24rem calc(100% - 24rem);
		}
		.inner-wide {
			width: 80%;
		}
		.inner {
			width: 70%;
		}
	}



/*------------------------------
	ul, ol
-------------------------------- */
.list-reset,
.editor .list-reset {
	margin-left: 0;
    padding-left: 0;
    list-style: none;
}


/* -----------------------------------------------
 text module
-------------------------------------------------- */
/*見出し*/
h1, h2, h3, h4, h5 {
  line-height: 1.4;
  display: block;
  width: 100%
}
.serif {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-feature-settings: "palt";
}
/* -----------------------------------------------
 hover
-------------------------------------------------- */
.hov_mov:hover {
	transform: translate(2px,2px);
	transition: all 0.1s;
	cursor: pointer;
}
:hover {
	transition: all 0.3s;
}
/*hoverアニメーション*/
.hov_anime {
	position: relative;
}
.hov_anime::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
  }
.hov_anime:hover::before{
	transform-origin: left top;
	transform: scale(1, 1);
}
/* -----------------------------------------------
	Button
-------------------------------------------------- */
.btn {
	display: inline-block;
	border-radius: 2rem;
	border: 1px solid #444;
	width: auto;
	text-align: left;
	text-decoration: none;
	padding-top: 1rem;
	padding-right: 2.75rem;
	padding-bottom: 1rem;
	padding-left: 1.5rem;
	font-size: 1rem;
	color: #000;
	line-height: 1em;
	border-width: 1px;
	border-style: solid;
	position: relative;
	transition: all 0.3s;
	background-color: #fff;
	/* box-shadow: 4px 4px 0px 0px rgb(0 0 0 / 5%); */
}
.btn:hover {
	transition: all 0.3s;
	background-color: #e6f2f4;
}
.btn:after {
	content: "";
	width: 8px;
	height: 9px;
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	position: absolute;
	margin: auto;
    left: auto;
	right: 1.25rem;
    top: 0;
    bottom: 0;
    margin: auto;
	background-color: #0fb3cb;
	transition: all 0.3s;
}
.btn:hover:after {
	right: 1rem;
	transition: all 0.3s;
}
	/* -------------------------------------------
		Button > wide PC
	---------------------------------------------- */
	@media (min-width:1680px) {
	}

/* -----------------------------------------------
 file size ( jquery.file.size-extension.js )
-------------------------------------------------- */
.fileInfo { margin-left: 0.5rem; }