@charset "UTF-8";

/* ============================================================
   Container
============================================================ */

html {
   background: #fff;
}

body {
   position: relative;
}

body.open {
   width: 100%;
}

/* SP nav オーバーレイ */
body::before {
   content: "";
   position: fixed;
   inset: 0;
   background-color: rgb(255 255 255 / 0.9);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
	background-image: url("../../images/bg_txt_col.png");
	background-position: left top 60px;
	background-repeat: no-repeat;
	background-size: auto 90%;
   opacity: 0;
   visibility: hidden;
   z-index: 1002;
   /* 閉じるとき: メニューが右に隠れてから白を遅れて消す */
   transition: opacity 0.3s 0.2s, visibility 0.3s 0.2s;
}

body.open::before {
   opacity: 1;
   visibility: visible;
   /* 開くとき: 遅延なしでメニューと一緒に出す */
   transition: opacity 0.3s 0s, visibility 0.3s 0s;
}

#wrapper {
   width: 100%;
   position: relative;
   margin: 0 auto;
}

/* ============================================================
   Header
============================================================ */

header {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgb(255 255 255 / 0);
   padding: 30px 0;
   z-index: 1003;
   transition: all 0.3s;
}

#header-inner {
   width: 100%;
   position: relative;
}

.headerbg {
   background-color: #fff!important;
}

#header-logo {
   width: 30%;
   max-width: 330px;
   position: absolute;
   top: 50%;
   left: 5%;
   font-size: clamp(1rem, 1.3vw, 1.3rem);
   line-height: 0;
   transform: translateY(-50%);
   z-index: 5;
   transition: all 0.3s;
}

#header-logo img {
   width: 100%;
   display: inline-block;
   vertical-align: middle;
}

/* ============================================================
   Hamburger
============================================================ */

.header-spmenu {
   display: none;
   width: 60px;
   height: 60px;
   position: relative;
   cursor: pointer;
   text-align: center;
   background-color: #65a8f5;
   margin-right: 3%;
   z-index: 2;
}

.header-spmenu > div {
   width: 32px;
   height: 30px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.header-spmenu > div span,
.header-spmenu > div span::before,
.header-spmenu > div span::after {
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 4px;
   background-color: #fff;
   transform-origin: center;
   transition: all 0.3s;
}

.header-spmenu > div span {
   top: 50%;
   transform: translateY(-50%);
}

.header-spmenu > div span::before {
   top: -12px;
}

.header-spmenu > div span::after {
   bottom: -12px;
}

.open .header-spmenu > div span {
   background-color: transparent;
}

.open .header-spmenu > div span::before {
   top: 0;
   transform: rotate(45deg);
}

.open .header-spmenu > div span::after {
   bottom: 0;
   transform: rotate(-45deg);
}

/* ============================================================
   Nav
============================================================ */

nav {
   width: 62%;
   max-width: 900px;
   position: relative;
   margin: 0 0 0 auto;
}

nav > ul {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}

nav > ul > li {
   position: relative;
   flex: 1;
}

nav > ul > li > a {
   width: 100%;
   display: block;
   position: relative;
   color: #000;
   font-size: clamp(1rem, 1.2vw, 1.8rem);
   line-height: 1.4;
   text-align: left;
   text-decoration: none;
   overflow: hidden;
   padding: min(10%, 20px) .5em;
	transition: color 0.3s, background-color 0.3s, filter 0.3s;
}
nav > ul > li > p {
	width: 100%;
   display: block;
   position: relative;
   color: #000;
   font-size: clamp(1.2rem, 1.4vw, 1.8rem);
   line-height: 1.4;
   text-align: left;
   text-decoration: none;
   overflow: hidden;
   padding: min(10%, 20px) .5em;
	transition: color 0.3s, background-color 0.3s, filter 0.3s;
}
nav > ul > li.contact > a {
   font-weight: 600;
	text-align: center;
   background-color: #23c2c0;
}

@media (hover: hover) {
   nav > ul > li > a:hover {
      opacity: 1;
   }
	nav > ul > li.contact > a:hover {
		color: #000;
		font-weight: 600;
		background-color: #23c2c0;
	}
	li:not(.contact):not(.intern):not(.close-button) a:hover {
		color: #23c2c0;
	}
	nav > ul > li.contact > a:hover,nav > ul > li.intern > a:hover {
		color: #000;
      filter: brightness(1.1);
   }
	
   /* JSが .text-inner を生成し .is-rollover-ready を付けてから有効化（ガタつき防止）。
      それまでは nav > ul > li > a の基本 padding を保持するので高さが変わらない。 */
   .is-rollover-ready > li:not(.intern):not(.close-button) > a {
      overflow: hidden;
      padding: 0;
   }

   .is-rollover-ready > li:not(.intern):not(.close-button) > a .text-inner,
   .is-rollover-ready > li:not(.intern):not(.close-button) > a .text-clone {
      display: block;
      padding: min(10%, 20px) .5em;
      transition: transform 0.3s ease;
   }

   .is-rollover-ready > li:not(.intern):not(.close-button) > a .text-clone {
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
   }

   .is-rollover-ready > li:not(.intern):not(.close-button) > a:hover .text-inner,
   .is-rollover-ready > li:not(.intern):not(.close-button) > a:hover .text-clone {
      transform: translateY(-100%);
   }
}

/* nav.is-overlay: ヒーロー上などで、白背景が付く前のホバー時だけ文字を白に（PC版のみ） */
@media (hover: hover) and (min-width: 769px) {
   /* 通常リンク：ホバー時の文字色を白に（通常の #23c2c0 化を上書き） */
   header:not(.headerbg) nav.is-overlay li:not(.contact):not(.intern):not(.close-button) a:hover {
      color: #fff;
   }

   /* スライド式ロールオーバー：ホバー時に出る文字を白に */
   header:not(.headerbg) nav.is-overlay #navi-inner > li:not(.intern):not(.close-button) > a:hover .text-inner,
   header:not(.headerbg) nav.is-overlay #navi-inner > li:not(.intern):not(.close-button) > a:hover .text-clone {
      color: #fff;
   }
}

/* サブメニュー */
nav > ul > li > ul {
   width: 120%;
   position: absolute;
   top: 100%;
   left: -10%;
   height: 0;
   overflow: hidden;
   visibility: hidden;
   opacity: 0;
   text-align: center;
   background-color: #fff;
   border-radius: 5px 5px 5px 5px;
   padding: 0 5%;
   z-index: 1;
   transition: all .2s ease;
}

nav > ul > li:hover > ul {
   height: auto;
   visibility: visible;
   opacity: 1;
   padding: 10px 5%;
   z-index: 2;
}

nav > ul > li > ul li {
   width: 100%;
}

nav > ul > li > ul li a {
   width: 100%;
   display: block;
   position: relative;
   color: #000;
   font-size: clamp(1rem, 1.2vw, 1.4rem);
   line-height: 1.4;
   text-align: left;
   text-decoration: none;
   border-bottom: 1px solid #eee;
   padding: 10px .5em 10px .5em;
}

nav > ul > li > ul li a::before {
   content: "-";
   display: inline-block;
   color: #23c2c0;
   vertical-align: middle;
   margin-right: .2em;
}

nav > ul > li > ul li:last-of-type a {
   border-bottom: none;
}

nav > ul > li > ul li p {
   width: 100%;
   color: #000;
   font-size: clamp(1rem, 1.2vw, 1.4rem);
   line-height: 1.4;
   text-align: left;
   background-color: #eee;
   padding: 10px 0 10px 1em;
}

@media (hover: hover) {
   nav > ul > li > ul li a:hover {
      opacity: 1;
      color: #23c2c0!important;
   }
}

.close-button p {
   width: 70%;
	display: block;
   cursor: pointer;
   color: #666;
   font-size: 1.5rem;
   line-height: 1.6;
   text-align: left;
   background-color: #e6e9ec;
   border-radius: 24px 0 0 24px;
	border: none;
   margin: 20px 0 0 auto;
   padding: 10px 1.5em;
   transition: all 0.3s;
}


.pc-only { display: block; }
.sp-only { display: none; }

/* ============================================================
   Contents
============================================================ */

#contents {
   width: 100%;
   position: relative;
   margin: 0 auto;
   z-index: 5;
}

#contents-page {
   width: 100%;
   position: relative;
   margin: min(8%, 100px) auto 0;
   z-index: 5;
}

.heartbeat {
   display: inline-block;
   animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
   0%   { transform: scale(1); }
   15%  { transform: scale(1.2); }
   30%  { transform: scale(1); }
   45%  { transform: scale(1.15); }
   60%  { transform: scale(1); }
   100% { transform: scale(1); }
}

.pururun {
   display: inline-block;
   animation: pururun 8s ease-in-out infinite;
}

@keyframes pururun {
   0%   { transform: scale(1, 1); }
   3%   { transform: scale(1.05, 0.95); }
   6%   { transform: scale(0.98, 1.04); }
   9%   { transform: scale(1.03, 0.97); }
   12%  { transform: scale(0.99, 1.02); }
   15%  { transform: scale(1, 1); }
   100% { transform: scale(1, 1); }
}

.opt-load {
   opacity: 0;
   transition: opacity 0.5s;
}
.load .opt-load {
   opacity: 1;
}
.masked-image {
   width: 100%;
   clip-path: inset(0 0 0 0);
}
.sp-title {}
.js-fade-in {}
.js-stagger {}

.anchor-wrap {
   position: relative;
}

.anchor-item {
   position: absolute;
   top: -160px;
   left: 0;
   width: 1px;
   height: 1px;
}

@media print {
   header {
      position: absolute;
   }
}

/* ============================================================
   Button
============================================================ */

.button {
   width: 100%;
   max-width: 600px;
   display: block;
   position: relative;
   cursor: pointer;
   color: #000;
   font-size: clamp(1.6rem, 2.6vw, 2.8rem);
   font-weight: 500;
   line-height: 1.6;
   text-align: center;
   text-decoration: none;
   background-color: #ffd200;
	border: 3px solid #ffd200;
   overflow: hidden;
	border-radius: 60px;
   margin: min(6%, 60px) auto 0;
   padding: 1em 1.5em;
   z-index: 1;
   transition: border 0.3s, color 0.3s;
}
.button.small {
	max-width: 480px;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	
}
.button.bl {
	color: #FFF;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	border: 3px solid #000;
   background-color: #000;
	padding: .8em 1.8em;
}

.button span {
   display: block;
   position: relative;
   z-index: 2;
}
.button::after {
   content: "";
   position: absolute;
   width: 1em;
   aspect-ratio: 1;
   border-radius: 50%;
   background: url("../../images/arrow.png") center / contain no-repeat;
	top: 50%;
	right: 0;
   transform: translate(-80%, -50%);
   z-index: 2;
   transition: all 0.3s;
}
.button.bl::after {
	background: url("../../images/arrow_w.png") center / contain no-repeat;
}

.button::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background-color: #ffde00;
   z-index: 1;
   transition: left 0.2s;
}

@media (hover: hover) {
   .button:hover {
      opacity: 1;
		color: #000;
		border: 3px solid #000;
   }
	.button.bl:hover {
      color: #000;
   }
   .button:hover::before {
      left: 0;
   }
	.button.bl:hover::after {
		background: url("../../images/arrow.png") center / contain no-repeat;
	}
}


/* ============================================================
   Table
============================================================ */

.data-t-style {
   width: 100%;
   line-height: 1.6;
	background-color: #fff;
}

.data-t-style tr:nth-of-type(odd) {
   background-color: #fff;
}

.data-t-style th {
   width: 12em;
   position: relative;
   color: #000;
   font-weight: 500;
   text-align: center;
   border-bottom: 2px solid #7376e0;
   padding: 2em;
}

.data-t-style td {
   text-align: left;
   border-bottom: 2px solid #ff8a00;
   padding: 2em;
}

.data-t-style td span {
   display: inline-block;
   color: #fff;
   background-color: #00006a;
   margin-bottom: .5em;
   padding: .5em 1em;
}

.data-t-style-b {
   width: 100%;
	font-size: clamp(1.4rem, 1.6vw, 1.6rem);
	line-height: 1.6;
	background-color: #fff;
}
.data-t-style-b a {
   color: #23c2c0;
	text-decoration: underline;
}

.data-t-style-b tr:nth-of-type(odd) {
   background-color: #eee;
}

.data-t-style-b th {
   width: 14em;
   position: relative;
   color: #000;
   font-weight: 500;
   text-align: center;
   border-bottom: 2px solid #65a8f5;
   padding: 1em 2em;
}

.data-t-style-b td {
   text-align: left;
   border-bottom: 2px solid #23c2c0;
   padding: 1em 2em;
}

.data-t-style-b tr:nth-of-type(1) th {
	border-top: 2px solid #65a8f5;
}
.data-t-style-b tr:nth-of-type(1) td {
	border-top: 2px solid #23c2c0;
}

/* ============================================================
   Footer
============================================================ */

.pagetop {
   width: 150px;
   height: 45px;
   position: fixed;
   right: -150px;
   bottom: 140px;
   z-index: 1001;
   transition: right 0.3s;
}

.pagetop-visible {
   right: 0;
}

footer {
   width: 100%;
   position: relative;
	background-image: url("../../images/footer_bg1.png"),url("../../images/footer_bg2.png");
	background-position: top right,bottom left;
	background-repeat: no-repeat;
	background-size: 15%,17%;
   background-color: #e6e9ec;
   z-index: 6;
}
footer .footer-top {
   width: 90%;
   max-width: 1000px;
   position: relative;
	display: flex;
	flex-flow: row wrap;
   margin: 0 auto;
	transform: translateY(-50%);
   z-index: 8;
}
footer .footer-top a {
	width: 50%;
	position: relative;
	overflow: hidden;
	display: flex;
   align-items: center;
   justify-content: center;
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 600;
	line-height: 1.6;
	vertical-align: middle;
	text-align: center;
	border-radius: 20px 0 0 20px;
	background-color: #65a8f5;
	transition: filter 0.3s ease;
	padding: 1em 2em;
}
footer .footer-top a:nth-last-of-type(1) {
	background-color: #23c2c0;
	border-radius: 0 20px 20px 0;
}
footer .footer-top a span {
	display: inline-block;
	position: relative;
	z-index: 3;
}
footer .footer-top a::after {
	content: " ";
	display: block;
	position: absolute;
	width: 2em;
	height: 2em;
	background-image: url("../../images/arrow_w.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1em;
	top: 50%;
	right: .8em;
	transform: translate(0, -50%);
	z-index: 2;
}
footer .footer-top a::before {
	content: " ";
	display: block;
	position: absolute;
	width: 2em;
	height: 2em;
	top: 50%;
	right: .8em;
	background-color: #fff;
	transform: translate(0, -50%) scale(0); 
	border-radius: 50%;
	transition: transform 0.2s ease;
	z-index: 2;
}

@media (hover: hover) {
	footer .footer-top a:hover {
		color: #000;
		opacity: 1;
		filter: brightness(1.15);
	}
	footer .footer-top a:hover::after {
		background-image: url("../../images/arrow.png");
	}
	footer .footer-top a:hover::before {
		transform: translate(0, -50%) scale(1);
	}
}
footer .footer-bottom {
   width: 100%;
   position: relative;
	overflow: hidden;
}
footer .footer-bottom .footer-bottom-wrap {
   width: 90%;
   max-width: 1280px;
   position: relative;
   margin: 0 auto;
   padding: 0 0 100px;
   z-index: 8;
}
footer img {
   width: 100%;
	max-width: 100%;
	height: auto;
}

footer .footer-bottom .inner {
   width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
   margin: 0 auto;
}

footer .footer-bottom .inner .footer-logo {
   width: 28em;
}

footer .footer-bottom .inner .footer-logo h1 {
   width: 100%;
	font-size: clamp(3rem, 7vw, 7.4rem);
	font-family: senobi-gothic, sans-serif;
	font-weight: 500;
   line-height: 1.3;
	letter-spacing: -.1em;
}
footer .footer-bottom .inner .footer-logo h1 span {
	display: block;
	font-size: 60%;
}
footer .footer-bottom .inner .footer-logo h2 {
	width: 70%;
	max-width: 330px;
	margin-top: 1em;
}

footer .footer-bottom .inner .footer-menu {
   flex: .9;
}
footer .footer-bottom .inner .footer-menu dl {
	width: 100%;
   display: table;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 2em;
}
footer .footer-bottom .inner .footer-menu dt {
   display: table-cell;
	background-color: #23c2c0;
	text-align: center;
	padding: 1em .5em;
}
footer .footer-bottom .inner .footer-menu dd {
   display: table-cell;
	position: relative;
	background-color: #FFF;
	text-align: center;
}
footer .footer-bottom .inner .footer-menu dd::after {
	content: " ";
	display: block;
	position: absolute;
	width: 1px;
	height: 1.2em;
	background-color: #999;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	z-index: 1;
}
footer .footer-bottom .inner .footer-menu dd:nth-last-of-type(1)::after {
	display: none;
}
footer .footer-bottom .inner .footer-menu dd a {
   display: block;
	font-size: clamp(1.2rem, 1.4vw, 1.8rem);
   line-height: 1.4;
	padding: 1em .5em;
}
footer .footer-bottom .inner .footer-menu > ul {
   width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 0 0 auto;
}
footer .footer-bottom .inner .footer-menu > ul > li {
	padding: .5em 1em;
}
footer .footer-bottom .inner .footer-menu > ul > li a {
   display: block;
   text-decoration: none;
	font-size: clamp(1.2rem, 1.4vw, 1.8rem);
   line-height: 1.4;
	color: #000;
}

footer .footer-bottom .inner .footer-menu > ul > li > a {
   width: 100%;
   position: relative;
}

footer .footer-bottom .inner .footer-menu > ul > li > ul > li > a {
   position: relative;
   font-size: clamp(1.2rem, 1.4vw, 1.4rem);
   line-height: 1.4;
   margin-top: 8px;
   padding-left: .6em;
}

footer .footer-bottom .inner .footer-menu > ul > li > ul > li > a::before {
   content: "-";
   position: absolute;
   top: 0;
   left: 0;
   color: #23c2c0;
}

footer .footer-bottom #copyright {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
	margin-top: min(8%, 80px);
}

footer .footer-bottom #copyright p {
   width: 50%;
   color: #000;
   font-size: clamp(1rem, 1.2vw, 1.4rem);
   line-height: 1.6;
}

footer .footer-bottom #copyright p a {
   display: inline-block;
   color: #000;
   text-decoration: none;
	margin-right: 2em;
}

footer .footer-bottom #copyright p:last-of-type {
   text-align: right;
}

footer .roll-items {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
footer .roll-items > div {
	position: absolute;
	z-index: 1;
}
footer .roll-items > div.small {
	width: 28%;
	max-width: 210px;
}

/* ============================================================
   SP ( ~768px )
============================================================ */

@media only screen and (max-width: 768px) {

   #wrapper {
      min-width: 100%;
   }

   /* header */
   header {
      background-color: #fff;
      padding: 0;
   }

   #header-inner {
      margin: 0 auto;
      padding: 0;
   }

   #header-logo {
      width: 55%;
      max-width: 320px;
      line-height: 1;
      transform: translateY(-45%);
   }

   .headerbg #header-logo {
      width: 55%;
      max-width: 320px;
   }

   /* hamburger */
   .header-spmenu {
      display: block;
      margin: 0 0 0 auto;
   }

   .open .header-spmenu {
      margin: 0 0 0 auto;
   }

   .open .header-spmenu::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
   }

   /* nav */
   nav {
      width: 100%;
      height: 100dvh;
      position: fixed;
      top: 60px;
      right: -110%;
      margin: 0;
      padding: 0;
      z-index: 1003;
      transition: right 0.3s;
   }

   .open nav {
      right: 0;
   }

   .open nav > ul {
      height: 100%;
      overflow-y: scroll;
      overscroll-behavior-y: contain;
   }
   .open nav > ul::-webkit-scrollbar {
      width: 5px;
   }
   .open nav > ul::-webkit-scrollbar-track {
      background-color: #999;
   }
   .open nav > ul::-webkit-scrollbar-thumb {
      background-color: #666;
   }

   nav > ul {
      width: 100%;
      height: 100%;
      display: block;
      margin: 0 auto;
      padding: 30px 0;
   }

   nav > ul::after {
      content: "";
      display: block;
      height: 160px;
   }

   nav > ul > li {
      width: 100%;
      display: block;
      flex: none;
      text-align: center;
      padding: 0;
   }

   nav > ul > li > a {
      width: 70%;
		display: block;
		position: relative;
      color: #000;
      font-size: 1.5rem;
      line-height: 1.8;
      text-align: left;
		border-bottom: 1px solid #CCC;
      margin: 0 0 0 auto;
      padding: .8em 1em .8em 1.5em;
   }
	nav > ul > li > p {
      width: 70%;
		display: block;
		position: relative;
      color: #000;
      font-size: 1.5rem;
      line-height: 1.8;
      text-align: left;
		border-bottom: 1px solid #CCC;
      margin: 0 0 0 auto;
      padding: .8em 1em .8em 1.5em;
   }
	nav > ul > li.inline > a,nav > ul > li.inline > p {
		border-bottom: none;
      padding: .8em 1em 0 1.5em!important;
	}
	nav > ul > li > a::after {
		content: "●";
		display: block;
		position: absolute;
		width: 1em;
		font-size: 1.2rem;
		color: #999;
		text-align: center;
		top: 1.2em;
		left: .5em;
		z-index: 1;
	}
	nav > ul > li > p::after {
		content: "●";
		display: block;
		position: absolute;
		width: 1em;
		font-size: 1.2rem;
		color: #999;
		text-align: center;
		top: 1.2em;
		left: .5em;
		z-index: 1;
	}
	
	#navi-inner > li:not(.intern):not(.close-button) > a {
      overflow: hidden;
      padding: .8em 1em .8em 1.5em;
   }

   #navi-inner > li:not(.intern):not(.close-button) > a .text-inner {
      display: block;
      transform: none !important;
      transition: none;
      padding: 0;
   }

   #navi-inner > li:not(.intern):not(.close-button) > a .text-clone {
      display: none;
   }
	
   nav > ul > li.contact > a {
		text-align: left;
      background-color: #23c2c0;
		border-bottom: none;
   }
	nav > ul > li.intern > a {
      background-color: #65a8f5;
		border-bottom: none;
   }
	nav > ul > li.intern.st > a {
      background-color: #ffd200;
		border-bottom: none;
   }
	.close-button p::after {
		content: " ";
		display: none!important;
	}
	nav > ul > li.small > a {
	 	font-size: clamp(1.2rem, 1.4vw, 1.4rem);
   	line-height: 1.4;
	}
	nav > ul > li.small > a::after {
		top: .8em;
	}
	
   
	nav > ul > li > ul {
      width: 70%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		position: relative;
      visibility: visible;
		border-bottom: 1px solid #CCC;
		opacity: 1;
      margin: 0 0 0 auto;
		background-color: transparent;
		border-radius: 0;
		left: 0;
      padding: 0 0 .5em;
   }
   nav > ul > li:hover > ul {
      padding: 0 0 .5em;
   }

   nav > ul > li > ul li {
      width: 100%;
      display: block;
      margin: 0;
      padding: 0;
   }

   nav > ul > li > ul li a {
      width: 100%;
      color: #000;
      font-size: 1.4rem;
      line-height: 1.6;
      text-align: left;
		border-bottom: none;
      margin: 0 0 0 auto;
      padding: 0 .5em 0 1.6em;
   }

   /* contents */
   #contents-page {
      margin: 60px auto 0;
   }

   .anchor-item {
      top: -80px;
   }

   /* button */
   .button {
      max-width: 300px;
      text-align: center;
      padding: .8em 1em;
   }

   /* table */
   .data-t-style {
      border: none;
   }
   .data-t-style th {
      width: 100%;
      display: block;
      background-color: #ddd;
      border: none;
      padding: 1em;
   }
   .data-t-style th br {
      display: none;
   }
   .data-t-style td {
      width: 100%;
      display: block;
      border: none;
      padding: 1em;
   }
   .data-t-style tr:nth-of-type(odd) {
      background-color: transparent;
   }
	
	.data-t-style-b {
		
	}

	.data-t-style-b tr:nth-of-type(odd) {
		background-color: transparent;
	}

	.data-t-style-b th {
      width: 100%;
      display: block;
		background-color: rgba(23, 190, 200, 0.6);
		border: none;
      padding: .8em 1em;
   }
	.data-t-style-b th br {
      display: none;
   }
	.data-t-style-b td {
      width: 100%;
      display: block;
      border: none;
      padding: .8em 1em;
   }
	.data-t-style-b tr:nth-of-type(1) th,.data-t-style-b tr:nth-of-type(1) td {
		border-top: none;
	}

   /* footer */
   .pagetop {
      bottom: 100px;
   }

   .pagetop-visible {
      right: -100px;
   }

	
   footer {
		background-position: center right,bottom left;
		background-size: 33%,33%;
	}
	footer .footer-top {
		width: 100%;
		flex-direction: column;
		transform: translateY(0);
		z-index: 8;
	}
	footer .footer-top a {
		width: 100%;
		height: 5em;
		border-radius: 0;
		padding: 1em 2em;
	}
	footer .footer-top a:nth-last-of-type(1) {
		border-radius: 0;
	}

	footer .footer-bottom .inner {
		width: 100%;
		flex-direction: column;
		margin: 0 auto;
	}

	footer .footer-bottom .inner .footer-logo {
		width: 100%;
		text-align: center;
		margin-top: 6%;
	}
	footer .footer-bottom .inner .footer-logo h2 {
		width: 70%;
		max-width: 330px;
		margin: 1em auto 0;
	}

	footer .footer-bottom .inner .footer-menu {
		flex: 1;
		margin-top: 2em;
	}
	footer .footer-bottom .inner .footer-menu dl {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		border-radius: 0;
		overflow: hidden;
		margin-bottom: 2em;
	}
	footer .footer-bottom .inner .footer-menu dt {
		display: block;
		width: 100%;
		padding: 1em .5em;
	}
	footer .footer-bottom .inner .footer-menu dd {
		width: 33.33%;
	}
	footer .footer-bottom .inner .footer-menu dd a {
		width: 100%;
		display: block;
		font-size: clamp(1.2rem, 1.4vw, 1.8rem);
		line-height: 1.4;
		padding: 1em .5em;
	}
	footer .footer-bottom .inner .footer-menu > ul {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		margin: 0 0 0 auto;
	}
	footer .footer-bottom .inner .footer-menu > ul > li {
		width: 50%;
		padding: .5em 1em;
	}

	footer .footer-bottom .inner .footer-menu > ul > li > a {
		width: 100%;
		position: relative;
	}

	footer .footer-bottom #copyright {
		width: 100%;
		flex-direction: column;
	}

	footer .footer-bottom #copyright p {
		width: 100%;
		text-align: center;
	}

	footer .footer-bottom #copyright p a {
		display: inline-block;
		margin: 1em .5em 0;
	}

	footer .footer-bottom #copyright p:last-of-type {
		text-align: center;
		margin: 1em 0 0;
	}

   .sp-only { display: block; }
   .pc-only { display: none; }
}