@charset "UTF-8";
/*
Theme Name: estemClub
*/

@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanmp.min.css");

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Cinzel");
@import url("https://use.fontawesome.com/releases/v5.0.6/css/all.css");

@import url("https://unpkg.com/swiper@7/swiper-bundle.min.css");
@import url("./css/reset.css");


/* ----------------------------------------------------------------- :root -- */
:root {
	--font-family-gosick: "YakuHanJP", 'Noto Sans JP',"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", sans-serif;
	--font-family-mincho: YakuHanMP, 'Noto Serif JP', "游明朝" , sans-serif;

	--global--font-size-base: 18px;

	/* Colors */
	--co-base:		 #F4F4F4;
	--co-white:		#FFFFFF;

	--co-main:		 #57A0B5;
	--co-sub:		  #A380DB;
	--co-sub-Blue:	 #589fb5;
	--co-sub-Orange:   #f58f12;
	--co-orange:	   #fff4e6;
	--co-sub-Red:	  #E69C5D;

	--co-black:		#292929;
	--co-gray-02:	  #646464;
	--co-gray-01:	  #B4B4B4;

	--bg-second:	   #E0DCDA;
}




/* ------------------------------------------------------- DefaultSETTINGS -- */
html {
	background: var(--co-base);
	font-family: var(--font-family-gosick);
	font-size: 18px;
	line-height: 1.6;
	color: var(--co-black);
	overflow-x: hidden;
}

section {
	padding: 6rem 0;
	position: relative;
	background: var(--co-base);
}

section:not(:last-of-type) {
	border-bottom: 1px solid var(--co-white);
}

h1 {
	font-size: 26px;
	font-weight: 700;
	position: relative;
}

h2 {
	font-size: 24px;
	text-align: left;
	line-height: 1.2;
	width: 100%;
}

.txt-grad {
	font-size: 38px;
	text-align: center;
	width: auto;
	font-weight: bold;
	color: var(--co-main);
	background:	-moz-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background: -webkit-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background:		 linear-gradient(135deg, var(--co-main) 0%, var(--co-sub) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h3 {
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	margin-bottom: 0.25em;
}

h3.bracket {
	font-size: 1.5em;
	color: var(--co-sub-Orange);
	border: 6px solid var(--co-sub-Orange);
	border-top: 0;
	border-bottom: 0;
	padding: 0.5em 0.75em;
	position: relative;
}

h3.bracket::before,
h3.bracket::after {
	content: "";
	position: absolute;
	width:  0.5em;
	height: 100%;
	top: 0;
	bottom: 0;
	margin: auto;
	border: 6px solid var(--co-sub-Orange);
	border-left: 0;
	border-right: 0;
}

h3.bracket::before {
	left: 0;
}

h3.bracket::after {
	right: 0;
}



h4{
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	border-bottom: 1px dotted #b1b0b0;
	line-height: 1.2;
	padding-bottom: 0.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 100%;
}

h6 {
	font-size: 16px;
	font-weight: 700;
	font-family: YakuHanJP, 'Cinzel', serif;
	letter-spacing: 0.25em;
	margin-bottom: 0.75em;
}

p{
	font-size: 16px;
	padding-bottom: 0.75em;
	width: 100%;
	text-align: left;
}

p:last-of-type{
	padding-bottom: 0;
}

p a {
	color: var(--co-main);
	margin-left: 0.5em;
	margin-right: 0.5em;
	position: relative;
	line-height: inherit;
}

p a.btnLink {
	background: var(--co-main);
	color: var(--co-white);
	width: auto;
	margin-left:  0.25em;
	margin-right: 0.25em;
	display: flex;
	border-radius: 0.25em;
	font-size: 14px;
	padding: 0.75em 0.5em 0.875em 2.5em;
	text-decoration: none;
	position: relative;
	line-height: 1.2;
}

p a.btnLink::before {
	content: "\f0c1";
	font-weight: 900;
	font-family: Font Awesome\ 5 Free;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	position: absolute;
	width:  2em;
	height: 1.25em;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #a7a7a7;
	margin: auto;
	box-shadow: 1px 0px 0px 0px #fff;
}





table {
	width: 100%;
	margin-bottom: 0.75em;
}

table tr {
	border-bottom: 1px solid #dddddd;
}

table tr:first-of-type {
	border-top: 1px solid #dddddd;
}

table tr th ,
table tr td {
	font-size: 14px;
	padding: 0.25em;
}

table tr th:not(:last-of-type) ,
table tr td:not(:last-of-type) {
	border-right: 1px solid #dddddd;
}



/* ---------------------------------------------------------------- colSet -- */
.col {
	max-width: 1200px;
	min-width: 960px;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-left: 2rem;
	padding-right: 2rem;
}

.w960 {
	max-width: 960px;
}




.col:not(:last-of-type) {
	margin-bottom: 3rem;
}



.col.title {
	align-items: center;
	flex-direction: column;

}

.col.title .colIn {
	max-width: 100%;
}

.col.single .colIn {
	width: 100%;
}
.col.single .colIn:not(:last-of-type) {
	margin-bottom: 1rem;
}



.col.db {
	gap: 1.5rem;
}
.col.db .colIn {
	width: 40%;
	flex-grow: 1;
}

.col.db2 .colIn:first-of-type {
	width: 25%;
}
.col.db2 .colIn {
	width: calc(75% - 1.5rem);
}



.col.tri {
	gap: 1.5rem;
}

.col.tri .colIn {
	width: 30%;
	flex-grow: 1;
}



.col.content {
	gap: 1rem;
}

.col.content .colIn.main {
	flex-basis: 840px;
	max-width: 840px;
	flex-grow: 1;
}

.col.content .colIn.side {
	width: 10%;
	flex-grow: 2;
}



.sideInWrapp:not(:last-of-type) {
	margin-bottom: 2rem;
}

.sideInWrapp .linkWrap {
	overflow: hidden;
	margin-bottom: 2px;
}
.sideInWrapp .linkWrap:first-of-type {
	border-top-left-radius: 0.6rem;
	border-top-right-radius: 0.6rem;
}
.sideInWrapp .linkWrap:last-of-type {
	border-bottom-right-radius: 0.6rem;
	border-bottom-left-radius: 0.6rem;
	margin-bottom: 0;
	box-shadow: 0px 12px 15px -15px #000;
}

.sideInWrapp .linkWrap a {
	text-decoration: none;
}

.sideInWrapp .linkWrap a dl {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background: #FFFFFF;
	transition: all 0.2s linear;
}

.sideInWrapp .linkWrap a dl dt {
	width: 30%;
	position: relative;
	overflow: hidden;
}

.sideInWrapp .linkWrap a dl dt img {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	width: auto;
	left: -30%;
	right: -30%;
	margin: auto;
	transition: all 0.2s linear;
}

.sideInWrapp .linkWrap a:hover dl dt img {
	transform: scale(1.2);
}

.sideInWrapp .linkWrap a dl dd {
	width: 70%;
	padding: 0.5em;
	text-align: left;
	display: flex;
	flex-direction: column;
}

.sideInWrapp .linkWrap a dl dd h4 {
	font-size: 0.875em;
	text-decoration: none;
	margin-bottom: 0;
	transition: all 0.2s linear;
	border: 0;
	margin-top: 0;
}

.sideInWrapp .linkWrap a dl dd span {
	font-size: 0.5em;
	text-decoration: none;
	opacity: 0.8;
	transition: all 0.2s linear;
}
.sideInWrapp .linkWrap a dl dd span i {
	margin-right: 0.5em;
}


.sideInWrapp .linkWrap.category a dl dd {
	width: 100%;
}
.sideInWrapp .linkWrap.category a dl dd h4 {
	border: 0;
	padding: 0;
}


.sideInWrapp .linkWrap a:hover dl {
	background: var(--co-sub-Blue);
}

.sideInWrapp .linkWrap a:hover dl {
	background: var(--co-sub-Blue);
}

.sideInWrapp .linkWrap a:hover dl dd h4,
.sideInWrapp .linkWrap a:hover dl dd span {
	color: #f4f4f4;
}




















.col2 {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding: 1.5rem;
	gap: 1rem;
}

.col2 > li {
	width: 50%;
	flex-grow: 1;
}

.col2 > li > a {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 6rem;
	margin: auto;
}





/* ------------------------------------------------------------- Component -- */
.fontXS { font-size: 10px;  }
.fontS  { font-size: 0.5em; }
.fontL  { font-size: 1.5em; }

.gap1rem { gap: 1rem; }

.ta-C { text-align: center; }


.bg-second {
	background-color: var(--bg-second);
}

.bg-orange {
	background-color: var(--co-orange);
}


.graybox {
	background: #e2e0e0;
	padding: 0.75em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	width: auto;
	font-size: 14px;
	border-radius: 0.25em;
	margin-bottom: 0.75em;
}

.bg-grad {
	color: var(--co-base);
	padding: 0.25em 0.75em 0.15em;
	border-radius: 0.5em;
	position: relative;
	background: var(--co-main);
	background:	-moz-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background: -webkit-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background:		 linear-gradient(135deg, var(--co-main) 0%, var(--co-sub) 100%);
}


.gradWrapp {
	padding: 0.75em;
	border-radius: 0.75em;
	position: relative;
	z-index: 1;
	height: 100%;
	overflow: hidden;
	background: var(--co-main);
	background:	-moz-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background: -webkit-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background:		 linear-gradient(135deg, var(--co-main) 0%, var(--co-sub) 100%);
}

.gradWrapp::after {
	content: "";
	top:   0.5em;
	right: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
	margin: auto;
	position: absolute;
	z-index: -1;
	border-radius: 0.5em;

	background: var(--co-white);
}

.gradWrappIn {
	padding: 3rem 1.5rem;
	display: flex;
	flex-direction: row;
	position: relative;
	gap: 2rem;
}

.gradWrappIn .gradTxt {
	width: 50%;
	z-index: 1;
}

.gradWrappIn .gradImg {
	position: absolute;
	width: 50%;
	right: -0.75em;
	top: 0.75em;
}

.gradWrappIn .gradImg.relative {
	position: relative;
	width: 50%;
	right: 0;
	top: 0;
}

.gradWrappIn .gradImg figure {
	overflow: hidden;
	width: 98%;
	position: absolute;
	height: 0;
	padding-top: 200%;
	left: 0;
	right: 0;
	margin: auto;
}

.gradWrappIn .gradImg figure img {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}


.gradWrapp.download {
	margin-top: 1em;
	height: auto;
}

.gradWrapp.download::after {
	top: 0.5em;
	right: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
}

.gradWrapp.download .gradWrappIn {
	padding: 1rem;
}



.download {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.download h2 {
	width: auto;
	color: var(--co-white);
}
.download ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.download a {
	transition: all 0.2s linear;
}

.download a:hover {
	opacity: 0.7;
}

.download img {
	width: 13rem;
}



.sp-wrapp {
	position: relative;
}

.sp-wrapp > img {
	position: relative;
	z-index: 1;
}

.sp-wrapp p {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	margin: 3% auto 0;
	width: 93%;
	overflow: hidden;
	border-radius: 20px;
	bottom: 0;
}

.fl-col-ce {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bo-radi1rem {
	border-radius: 1rem;
}


body::before {
	content: "";
	top: 0;
	height: 4px;
	z-index: 999999;
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	background: var(--co-main);
	background:	-moz-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background: -webkit-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background:		 linear-gradient(135deg, var(--co-main) 0%, var(--co-sub) 100%);
}



/* ---------------------------------------------------------------- header -- */
header {
	position: relative;
	padding: 2rem 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 100;
	transition: all 0.2s linear;
}



header::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: var(--co-white);
	z-index: -1;
	opacity: 0;
	transform: translateY(-100%);
	transition: all 0.2s linear;
}

header .col .colIn {
	width: 100%;
}

header .drawer-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}

header .drawer-menu .logoArea {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}

header .drawer-menu .logoArea h1 a {
	display: flex;
}

header .drawer-menu .logoArea h1 a img {
	display: flex;
	height: auto;
	transition: all 0.2s linear;
}

header .drawer-menu .logoArea h1 a:hover img {
	opacity: 0.7;
}

header .drawer-menu .logoArea h1 a img.icon-app {
	width: 3.6rem;
	border-radius: 0.5em;
	border: 1px solid var(--co-gray-01);
}

header .drawer-menu .logoArea h1 a img.logo-h1 {
	width: 11rem;
	margin-left: 0.6em;
}

header .drawer-menu .mainMenu ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	gap: 0.5em;
}

header .drawer-menu .mainMenu ul li.menuLogo {
	display: none;
}

header .drawer-menu .mainMenu ul li a {
	position: relative;
	z-index: 1;
	padding: 0.75em 0.5em;
	color: var(--co-main);
	text-decoration: none;
	transition: all 0.2s linear;
	display: block;
}

header .drawer-menu .mainMenu ul li a:hover {
	color: var(--co-base);
}


header .drawer-menu .mainMenu ul li a::after {
	content: "";
	border-radius: 0.25em;
	height: 2px;
	top: calc(100% - 2px);
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	z-index: -1;
	transition: all 0.2s linear;
	background: var(--co-main);
	background:	-moz-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background: -webkit-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background:		 linear-gradient(135deg, var(--co-main) 0%, var(--co-sub) 100%);
}

header .drawer-menu .mainMenu ul li a:hover:after {
	top: 0;
	height: 100%;
}

.is-show header {
	padding: 0.75rem 0;
}
.is-show header::after {
	opacity: 0.6;
	transform: translateY(0);
}
.is-show header .drawer-menu .logoArea h1 a img.icon-app {
	width: 2.5rem;
	border-radius: 0.3em;
}
.is-show header .drawer-menu .logoArea h1 a img.logo-h1 {
	width: 8rem;
}

.is-show header .drawer-menu .mainMenu ul li a {
	padding: 0.35em 0.5em;
}
.is-show header .drawer-menu .mainMenu ul li a::after {
	top: calc(100%);
	height: 0;
}
.is-show header .drawer-menu .mainMenu ul li a:hover:after {
	top: 0;
	height: 100%;
}

.drawer-hamburger {
	display: none;
}



/* ----------------------------------------------------------- contentArea -- */
.contentArea {
	padding: 2rem 0;
}

.contentArea .sideIn {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}




/* --------------------------------------------------------------- mainImg -- */
.mainImg {
	padding-top: 140px;
	padding-bottom: 0;
	background: rgb(242,242,242);
	background:	-moz-linear-gradient(top,		rgba(224,224,224,1) 0%, rgba(255,255,255,1) 89%, rgba(224,224,224,1) 89%, rgba(242,242,242,1) 100%);
	background: -webkit-linear-gradient(top,		rgba(224,224,224,1) 0%, rgba(255,255,255,1) 89%, rgba(224,224,224,1) 89%, rgba(242,242,242,1) 100%);
	background:		 linear-gradient(to bottom,  rgba(224,224,224,1) 0%, rgba(255,255,255,1) 89%, rgba(224,224,224,1) 89%, rgba(242,242,242,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=0 );
}

.mainImg .colIn {
	width: 100%;
}

.mainWrapp {
	display: flex;
	flex-direction: row;
	position: relative;
	justify-content: space-between;
}

.mainTxt {
	width: 55%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}


.mainTxtIn {
	margin-top: -30px;
}

.mainTxtIn h2 {
	margin: 0 0 0.5em;
	border: none;
	border-radius: 0;
	padding: 0.5em 0.75em;
	font-size: 2.75em;
}

.mainTxtIn p {
	font-size: 18px;
}

.mainBg {
	width: 40%;
	height: 0;
	overflow: hidden;
	position: relative;
	padding-top: 50%;
}

.mainBg .sp-wrapp {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.mainBg .sp-wrapp img {
	width: 100%;
	height: auto;
}

.mainBg .swiper {
	position: absolute;
	z-index: 0;
	overflow: hidden;
	border-radius: 4% 4% 0 0;
	width: 93%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 2.8% auto 0;
	background: var(--co-white);
}

.mainBg .swiper .swiper-wrapper .swiper-slide .slideItem img {
	width: 100%;
	height: 100%;
}

.swiper-horizontal > .swiper-pagination-bullets {
	bottom: 2%;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2rem;
	background:	-moz-linear-gradient(top,  rgba(255,255,255,0) 0%,	 rgba(255,255,255,1) 95%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,	 rgba(255,255,255,1) 95%);
	background:		 linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 95%);
}

.swiper-pagination-bullet {
	background: var(--co-main);
	width:  1rem;
	height: 0.3rem;
	border-radius: 60px;
	transition: all 0.2s linear;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
	width:  2rem;
	height: 0.3rem;
}



/* ---------------------------------------------------------------- dlArea -- */
.dlArea.gradWrapp {
	border-radius: 0;
}

.dlArea.gradWrapp::after {
	display: none;
}

.dlArea.gradWrapp {
	border-radius: 0;
	padding: 2rem 0;
}



/* -------------------------------------------------------------- heroArea -- */
.heroArea {
	padding: 9rem 0 4rem;
}



/* --------------------------------------------------------------- footter -- */
.noticeArea {
	font-size: 10px;
	padding: 1.5em;
}

.noticeArea .colIn {
	width: 100%;
}

.noticeArea ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1em;
}

footer {
	box-shadow: 0 30px 50px -50px #000 inset; 
	padding-top:	0;
	padding-bottom: 0;

	background:	-moz-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background: -webkit-linear-gradient(-45deg, var(--co-main) 0%, var(--co-sub) 100%);
	background:		 linear-gradient(135deg, var(--co-main) 0%, var(--co-sub) 100%);
}

footer .col.linkArea:not(:last-of-type) {
	margin: 0 auto;
}

footer .linkArea .colIn {
	padding: 3.5rem 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

footer .linkArea .colIn ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
footer .linkArea .colIn ul.secLogo {
	margin-bottom: 1rem;
	background: #FFF;
	padding: 0.75rem;
	border-radius: 0.5rem;
	box-shadow: 0px 4px 0 0 rgba(0,0,0,0.4);
}

footer .linkArea .colIn ul.secLogo li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

footer .linkArea .colIn ul.secLogo li a img.icon-app {
	width: 2.5rem;
	border-radius: 0.5em;
	border: 1px solid var(--co-gray-01);
}

footer .linkArea .colIn ul.secLogo li a img.logo-h1 {
	width: 12rem;
	margin-left: 0.75em;
}


footer .linkArea .colIn ul.secLink {
	gap: 0.75em;
}





footer .copyArea .colIn {
	width: 100%;
	box-shadow: 0px -1px 0px 0px rgb(0 0 0 / 25%);
	border-top: 1px solid rgba(255,255,255,0.25);
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	font-size: 0.75em;
	color: var(--co-base);
}

footer .copyArea ul.copyAreaLink {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 0.75em;
	padding: 1em 0;
}

footer ul li a {
	color: var(--co-base);
	text-decoration: none;
	transition: opacity 0.2s linear;
}

footer ul li a:hover {
	opacity: 0.7;
}















/* -------------------------------------------------------------- heroArea -- */
.heroArea figure {
	overflow: hidden;
	border-radius: 0.5em;
	position: relative;
}

.heroArea figure img {
	max-width: 100%;
	width: fit-content;
	height: auto;
}

.heroArea figure time {
	position: absolute;
	bottom: 0.25em;
	right: 0.5em;
}

.heroArea figure time dl {
	display: flex;
	font-size: 12px;
}

.heroArea figure time dl dt i {
	font-size: 12px;
	line-height: 1.6;
	display: flex;
	align-items: center;
	justify-content: center;
}

.heroArea figure time dl dd {
	font-size: inherit;
	margin-left: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.heroArea h1 {
	margin: 1em 0;
}



/* -------------------------------------------------------- breadcrumbArea -- */
.breadcrumbArea {
	padding: 0.5em 0;
	background: #FFFFFF;
	font-size: 12px;
}

.breadcrumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.breadcrumbs > span:not(:last-of-type) {
	position: relative;
	padding-right: 3em;
	z-index: 1;
	overflow: hidden;
}

.breadcrumbs > span:not(:last-of-type):after {
	content: '';
	height: 3rem;
	width: 3rem;
	border: 3px solid #f4f4f4;
	position: absolute;
	transform: rotate(45deg) skew(10deg, 10deg);
	border-left: 0;
	border-bottom: 0;
	top: -10vh;
	bottom: -10vh;
	margin: auto;
	right: 1.5em;
	z-index: -1;
}

.breadcrumbs > span a {
	transition: all 0.2s linear;
}

.breadcrumbs > span a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.breadcrumbs > span a span i {
	margin-right: 0.25em;
}





/* -------------------------------------------------------------- postLink -- */
.postLink:not(:last-of-type) {
	margin-bottom: 1rem;
}

.postLink a {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	text-decoration: none;
	background: #FFF;
	border-radius: 1rem;
	padding: 0.75rem;
	position: relative;
	transition: all 0.2s linear;
}

.postLink a:hover {
	background: var(--co-sub-Blue);
}

.postLink_img {
	width: 35%;
	border-radius: 0.75rem;
	overflow: hidden;
	position: relative;
}

.postLink_img img {
	width: 100%;
	transition: all 0.2s linear;
}

.postLink a:hover .postLink_img img {
	transform: scale(1.2);
}

.postLink_img h5 {
	background: var(--co-sub-Blue);
	font-size: 14px;
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	padding: 0.5em 0.75em;
	border-radius: 0.5em;
	color: #f4f4f4;
	line-height: 1.2;
	z-index: 10000;
}

.postLink_txt {
	width: 63%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.postLink_txt h3 {
	width: 100%;
	margin-top: auto;
	transition: all 0.2s linear;
}

.postLink_txt p {
	font-size: 12px;
	margin-bottom: auto;
	transition: all 0.2s linear;
}

.postLink a:hover .postLink_txt h3 ,
.postLink a:hover .postLink_txt p {
	color: #f4f4f4;
}

.postLink_txt span {
	width: 100%;
	display: block;
	font-size: 12px;
	background: #f4f4f4;
	border-radius: 0.875em;
	padding: 0.25em 0.75em;
	text-align: left;
	margin-top: 0.75em;
}
.postLink_txt span i {
	margin-right: 0.5em;
}





/* ----------------------------------------------------------------- #info -- */
.listLink li a {
	padding: 0.5em 2.5em 0.5em 0.75em;
	margin-top: 0;
	background: var(--co-white);
	display: block;
	text-decoration: none;
	position: relative;
	transition: all 0.2s linear;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}
.listLink li a:hover {
	background: #d0e5eb;
}
.listLink li:not(:last-of-type) a {
	margin-bottom: 3px;
}
.listLink li:first-of-type a {
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}
.listLink li:last-of-type a {
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}
.listLink li a span {
	font-size: 0.75em;
	min-width: 8.5em;
	text-align: left;
}
.listLink li a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 0.875rem;
	height: 0.875rem;
	left: calc(100% - 1.25rem - 1.5em);
	transition: all 0.2s linear;
	border: 4px solid var(--co-main);
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
}



.post-type-archive-info .col.content,
.single-info .col.content {
	justify-content: center;
}
.post-type-archive-info .postLink_txt {
	width: 100%;
}





/* ---------------------------------------------------------------- wpMice -- */
.thumbnailArea {
	width: 100%;
}

.thumbnailArea img {
	width: 100%;
	height: auto;
	width: 100%;
	max-width: 100%;
	height: auto;
	overflow: hidden;
	border-radius: 0.5em;
	position: relative;
	display: block;
	box-shadow: 0px 10px 20px -20px var(--co-black);
}


.columnTitle {
	margin: 40px 0;
}
.columnTitle time {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	font-size: 13px;
	margin-top: 10px;
	background: #FFFFFF;
	padding: 0.25em 2.5em;
	border-radius: 100px;
}
.columnTitle time span i {
	margin-right: 0.5em;
}


.mce-content-body {
	width: 100%;
}


.mce-content-body h2{
	font-size: 24px;
	text-align: left;
	border-bottom: 2px solid #333;
	line-height: 1.2;
	padding-bottom: 0.5em;
	margin-top: 2em;
	margin-bottom: 0.75em;
	width: 100%;
}

.mce-content-body h3{
	font-size: 20px;
	font-weight: 700;
	padding: 0.5em 0.75em;
	background: var(--co-white);
	border-radius: 0.5em;
	text-align: left;
	margin-top: 1em;
	margin-bottom: 0.75em;
}

.mce-content-body h4{
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	border-bottom: 1px dotted #b1b0b0;
	line-height: 1.2;
	padding-bottom: 0.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 100%;
}





.mce-content-body ul {
	list-style-type: none!important;
	padding-bottom: 0.75em;
}

.mce-content-body ul li {
	text-align: left;
	padding-left: 1em;
	position: relative;
}

.mce-content-body ul li:before {
	position: absolute;
	content: '';
	left: 0;
	width: 0.4em;
	top: 0.25em;
	bottom: 0;
	margin: auto;
	height: 0.4em;
	margin: auto;
	background: var(--co-sub-Blue);
	border-radius: 30rem;
	box-shadow: 0px 0px 0px 2px #276172;
	left: 0.15em;
}



.mce-content-body ol {
	counter-reset:number;
	list-style-type: none!important;
	padding-bottom: 0.75em;
}

.mce-content-body ol li {
	text-align: left;
	line-height: 1.4em;
	padding-left: 1.5em;
	position: relative;
}

.mce-content-body ol li:before{
	position: absolute;
	counter-increment: number;
	content: counter(number) ".";
	display: inline-block;
	left: 0;
	text-align: center;
	width: 1.5em;
	text-align: right;
}

.mce-content-body ol li:not(:last-of-type) {
	padding-bottom: 0.5em;
}

.mce-content-body ol li ol li:before{
	content: "(" counter(number) ")";
}

.mce-content-body ol li ol li {
	padding-top: 0.25em;
}

.mce-content-body ol li ol li:not(:last-of-type) {
	padding-bottom: 0;
}

.mce-content-body img {
	width: 100%;
	max-width: 100%;
	height: auto;
	overflow: hidden;
	border-radius: 0.5em;
	position: relative;
	display: block;
	box-shadow: 0px 10px 20px -20px var(--co-black);
}

.page-apponly section img {
	max-width: 100%;
	height: auto;
}



/* -------------------------------------------------------- #toc_container -- */
#toc_container {
	background: var(--co-white);
	border: none;
	padding: 0.5rem 0.75rem;
	width: calc(100% - 2em)!important;
	display: flex;
	font-size: 14px;
	flex-direction: column;
	margin: 2em auto;
	border-radius: 0.5em;
}

#toc_container p.toc_title {
	font-size: inherit;
	text-align: left;
}

.mce-content-body #toc_container p.toc_title a {
	display: inline-block;
	font-size: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0.5em;
	color: var(--co-main);
}

.mce-content-body #toc_container p.toc_title a::before {
	display: none;
}

#toc_container p.toc_title + ul.toc_list {
	margin-top: 0.5em;
	width: 100%!important;
	font-size: inherit;
}

#toc_container p.toc_title + ul.toc_list li {
	font-size: inherit;
	text-align: left;
}

#toc_container p.toc_title + ul.toc_list li::before {
	display: none;
}

#toc_container p.toc_title + ul.toc_list li a {
	font-size: inherit;
	display: block;
	color: var(--co-main);
}

#toc_container p.toc_title + ul.toc_list li a span {
	font-size: inherit;
	color: var(--co-main);
}

#toc_container p.toc_title + ul.toc_list li ul {
	font-size: inherit;
}



.acMenu dt {
	margin-top: 1em;
	position: relative;
	cursor: pointer;
}

.acMenu dt h3 {
	padding: 0.5em 2.5em 0.5em 0.75em;
	margin-top: 0;
	margin-bottom: 0;
	background: var(--co-white);
	border-radius: 0.5em;
}


.acMenu dt::before ,
.acMenu dt::after  {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	border-radius: 4px;
	background-color: var(--co-main);
}

.acMenu dt::before {
	width: 1.25rem;
	height: 3px;
	left: calc(100% - 1.25rem - 1.5em);
	transition: all 0.2s linear;
}

.acMenu dt::after {
	width: 3px;
	height: 1.25rem;
	left: calc(100% - 1.25rem - 1.5em);
	transition: all 0.2s linear;
}

.acMenu dt.active::before {
	transform: rotate( 180deg );
}

.acMenu dt.active::after {
	transform: rotate( 90deg );
}

.acMenu dd {
	margin-top: 0.75em;
	display: none;
}

/* ---------------------------------------------------------- editor-style -- */
#tinymce {
	padding: 1rem !important;
	background: var(--co-base);
}



/* -------------------------------------------------------------- .appOnly -- */
.appOnly section {
	padding: 0 12px 3rem;
}


























/* --------------------------------------------------------------- appView -- */
body#appView::before,
#appView header,
#appView .drawer-hamburger,
#appView .heroArea,
#appView .breadcrumbArea,
#appView .colIn.side,
#appView .noticeArea,
#appView #toc_container,
#appView footer {
	display: none!important;
}

#appView .contentArea ,
#appView section {
	border: 0!important;
	padding: 0 0 1rem 0;
}

#appView .contentArea .col.content {
	gap: 1rem;
	justify-content: center;
}

#appView .thumbnailArea {
	width: calc(100% + 2rem);
	margin-left: -1rem;
	margin-right: -1rem;
}




/* ================================================== VIEWPORT Tablet 768px = */
@media screen and ( max-width:959px ) {
section {
	padding: 4rem 0;
}


.col {
	max-width: 100%;
	min-width: 100%;
	padding-left:  1rem;
	padding-right: 1rem;
}
.col.db {
	gap: 1rem;
	justify-content: center;
}
.col.db .colIn {
	width: max(50%, 600px);
	flex-grow: inherit;
}


.col.content .colIn.main {
	flex-basis: 100%;
	max-width: 100%;
}


.gradWrapp {
	padding: 0.5em;
}


header {
	padding: 1.5rem 0!important;
}
header .drawer-menu .logoArea h1 a img.icon-app {
	width: 2.8rem;
	border-radius: 0.4em;
}
header .drawer-menu .logoArea h1 a img.logo-h1 {
	width: 13rem;
}


header .drawer-menu .mainMenu ul li.menuLogo {
	display: block;
}
header .drawer-menu .mainMenu ul li.menuLogo a {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 2rem;
	padding: 0;
	max-width: 20rem;
	margin: auto;
	margin-bottom: 4rem;
}
header .drawer-menu .mainMenu ul li.menuLogo a .icon-app {
	max-width: 10rem;
	border-radius: 2em;
	border: 1px solid var(--co-gray-01);
}
header .drawer-menu .mainMenu ul li.menuLogo a::after {
	background: transparent;
}


.heroArea {
	padding: 2rem 0 3rem;
}

.mainTxtIn h2 {
	font-size: 2em;
}


.mainImg {
	padding-top: 50px;
}
.mainImg .col {
	padding-right: 0;
}
.mainBg {
	width: 42.5%;
	padding-top: 85%;
}
.mainBg .sp-wrapp {
	width: 115%;
}
.mainBg .swiper {
	width: 115%;
	margin-left: 4%;
}

.gradWrappIn .gradImg.relative > img {
	width: 100%;
}


header ,
header .col {
	position: initial;
}
header {
	position: initial;
	width: calc(100% - 4.5rem);
	margin: 0;
}
header .col .colIn {
	position:   initial!important;
	transition: initial!important;
	transform:  initial!important;
}
header .drawer-menu .logoArea {
	width: 100%;
	align-items: center;
	justify-content: center;
}
header .drawer-menu .logoArea h1 a img.icon-app {
	width: 2.3rem!important;
}
header .drawer-menu .logoArea h1 a img.logo-h1 {
	width: 10rem!important;
	margin-left: 0.35em!important;
}
header .drawer-menu .mainMenu ul {
	flex-direction: column;
	max-width: 600px;
	margin: auto;
	height: 100%;
	justify-content: center;
}
header .drawer-menu .mainMenu ul li {
	width: 100%;
}
header .drawer-menu .mainMenu ul li a {
	color: var(--co-white);
}
.is-show header .drawer-menu .mainMenu ul li a::after,
header .drawer-menu .mainMenu ul li a::after {
	top: 0;
	height: 100%;
}
.drawer-hamburger {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
}



.mainMenu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	z-index: 999;
	transform: translateX(100%);
	background: #f4f4f4;
}
.drawer-open .mainMenu {
	transition: all 0.1s linear;
	transform: translateX(0);
}
.drawer-close .mainMenu {
	transition: all 0.1s linear;
}


.noticeArea ul {
	flex-direction: column;
}


.drawer-hamburger {
	position: fixed;
	top: 0px;
	width: 3.5rem;
	height: 3.5rem;
	background: #a281db;
	right: 0;
	z-index: 999999999;
	border: none;
	border-radius: 0 0 0.5rem 0.5rem;
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.2s linear;
	outline: none;
	right: 0.5rem;
}
.drawer-hamburger .sr-only {
	display: none;
}
.drawer-hamburger .drawer-hamburger-icon {
	width: 100%;
	height: 1.5rem;
	margin: 0 auto 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.drawer-hamburger .drawer-hamburger-icon i {
	width: 100%;
	height: 3px;
	background: #f4f4f4;
	border-radius: 0.25rem;
	position: relative;
	display: block;
}
.drawer-hamburger .drawer-hamburger-icon i::before,
.drawer-hamburger .drawer-hamburger-icon i::after {
	content: "";
	width: 100%;
	height: 3px;
	background: #f4f4f4;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 2rem;
	transition: all 0.2s linear;
}
.drawer-hamburger .drawer-hamburger-icon i::after {
	transform: translateY(0.6rem);
}
.drawer-hamburger .drawer-hamburger-icon i::before {
	transform: translateY(-0.6rem);
}

.drawer-hamburger p {
	line-height: 1;
	font-size: 10px;
	text-align: center;
	color: #f4f4f4;
}
.drawer-open .drawer-hamburger .drawer-hamburger-icon i {
	background: transparent;
}
.drawer-open .drawer-hamburger .drawer-hamburger-icon i::before {
	transform: translateY(0) rotate(30deg);
}
.drawer-open .drawer-hamburger .drawer-hamburger-icon i::after {
	transform: translateY(0) rotate(-30deg);
}














}
/* ============================================== VIEWPORT SmartPhone 599px = */
@media screen and ( max-width:599px) {

.col {
	padding-left:  1rem;
	padding-right: 1rem;
	overflow: hidden;
}

.col.db {
	gap: 0.5rem;
}

.txt-grad {
	font-size: 32px;
}


header .drawer-menu .mainMenu ul {
	max-width: 70vw;
}
header .drawer-menu .mainMenu ul li.menuLogo a {
	max-width: 70%;
	gap: 1rem;
}
header .drawer-menu .mainMenu ul li.menuLogo a .icon-app {
	max-width: 60%;
	border-radius: 1.2em;
}


.heroArea {
	padding: 0 0 2rem;
}


.mainImg {
	padding: 2rem 0 0;
}
.mainImg .col {
	padding-right: 1rem;
}
.mainWrapp {
	flex-direction: column;
}
.mainTxt {
	width: 100%;
	margin-bottom: 1rem;
}
.mainTxtIn {
	margin-top: 0;
}
.mainTxtIn h2 {
	font-size: 1.75em;
}
.mainTxtIn p {
	font-size: 16px;
	padding-bottom: 0.5em;
}
.mainTxtIn p br {
	display: none;
}
.mainBg {
	width: 80%;
	padding-top: 100%;
	margin: auto;
}
.mainBg .sp-wrapp {
	width: 100%;
}
.mainBg .swiper {
	width: 92%;
	margin-left: 4%;
	margin-right: 4%;
}


.download {
	flex-direction: column;
}
.download img {
	width: 100%;
}


.gradWrapp {
	padding: 0.3em;
	overflow: initial;
}
.gradWrapp::after {
	top: 0.3em;
	right: 0.3em;
	bottom: 0.3em;
	left: 0.3em;
}
.gradWrappIn {
	padding: 2rem 1rem;
}
.gradWrappIn .gradTxt {
	width: 60%;
}
.gradWrappIn .gradImg {
	right: -13%;
	top: auto;
	bottom: -0.3em;
	height: 0;
	overflow: hidden;
	padding-top: 80%;
}
.gradWrappIn .gradImg figure {
	margin: 0 0.25rem;
	top: 0;
	margin: auto;
}

footer .linkArea .colIn ul.secLogo {
	width: 100%;
	justify-content: center;
}

footer .linkArea .colIn ul.secLink {
	flex-wrap: wrap;
	gap: 0.5rem;
}

footer .linkArea .colIn ul.secLink li {
	width: calc(100% / 2 - 1rem);
}


#how .gradWrappIn {
	flex-direction: column-reverse;
	gap: 0.75rem;
	padding: 1rem;
}
#how .gradWrappIn .gradTxt,
#how .gradWrappIn .gradImg.relative {
	width: 100%;
	padding: 0;
	height: auto;
}


.postLink a {
	flex-direction: column;
}
.postLink_img {
	width: 100%;
}
.postLink_img img {
	height: auto;
}
.postLink_txt {
	width: 100%;
}


/* ----------------------------------------------------------------- #info -- */
#info .col.db2 {
	gap: 1rem;
}
#info .col.db2 .colIn,
#info .col.db2 .colIn:first-of-type {
	width: 100%;
}

.listLink li a {
	align-items: flex-start;
	flex-direction: column;
}




/* ============================================== VIEWPORT SmartPhone 599px = */
/* =============================================================== END!!!!! = */
}