@charset "UTF-8";

/****************************************/
/*	color: 		 													*/
/****************************************/
:root {
  --color-white:255,255,255;
  --color-black:51,51,51;
  --color-palegray:247,249,250;
  --color-lightgray:190,190,190;
  --color-darkgray:150,150,150;
  --color-primary:18,179,199;
  --color-primary-orange:232,173,95;
  --color-primary-pink:215,76,119;
  --color-primary-lightgreen:173,211,97;
  --color-primary-blue:62,150,210;
  --color-primary-peacock:20,167,157;
  --color-primary-purple:139,124,186;
}

/****************************************/
/*	common		 													*/
/****************************************/
html { font-size:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
body { line-height:1.7; color:rgb(var(--color-black)); font-family:"Noto Sans JP", 'Manrope', sans-serif; font-size:clamp(0.875rem, 0.85rem + 0.4vw, 1.0rem); font-kerning:normal; font-feature-settings:"palt"; letter-spacing:0.02em; background:rgb(var(--color-white)); }

/****************************************/
/*	custom															*/
/****************************************/
main { position:relative; }
hr { margin:0 0 2rem; padding:0; border:0; }
a { text-decoration:none; }
sup { position:relative; top:0.1em; font-size:0.7rem; vertical-align:top; }
sub { position:relative; top:0.7em; font-size:0.7rem; vertical-align:top; }

.ic-wrap { position:relative; overflow-x:hidden; width:100%; }

/****************************************/
/*	.backtotop													*/
/****************************************/
/*
.ic-backtotop { position:fixed; right:0; bottom:0; z-index:1000; }
.ic-backtotop a { display:block; position:relative; width:48px; height:48px; background:rgba(var(--color-black),0.6); transition:background-color 0.3s ease; cursor:pointer; }
.ic-backtotop a::before { content:''; display:block; position:absolute; top:50%; left:50%; width:8px; height:8px; border-top:rgba(var(--color-white),1.0) 2px solid; border-right:rgba(var(--color-white),1.0) 2px solid; transform-origin:center center; transform:rotate(-45deg) translate(-2px,-2px); }
*/
.ic-backtotop{ position:fixed; right:clamp(1rem, 4vw, 2rem); bottom:clamp(1rem, 4vw, 2rem); opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .3s ease, transform .3s ease, visibility .3s ease; z-index:90; }
.ic-backtotop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.ic-backtotop a{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; color:rgb(var(--color-white)); background:rgb(var(--color-black)); cursor:pointer; }
.ic-backtotop a::before { content:''; display:block; position:absolute; top:50%; left:50%; width:8px; height:8px; border-top:rgba(var(--color-white),1.0) 2px solid; border-right:rgba(var(--color-white),1.0) 2px solid; transform-origin:center center; transform:rotate(-45deg) translate(-2px,-2px); }


/****************************************/
/*	.btn       													*/
/****************************************/
.ic-s-btns { padding-top:2.5em; text-align:center; }
.ic-s-btn { display:inline-flex; justify-content:center; align-items:center; position:relative; z-index:0; overflow:hidden; width:100%; max-width:480px; padding:0.75rem 2rem; border:rgb(var(--color-black)) 2px solid; color:rgb(var(--color-white)); font-size:1.25rem; font-weight:bold; background:rgb(var(--color-black)); transition:color .4s ease; }
.ic-s-btn::after{ content:''; position:absolute; inset:0; z-index:-1; background:rgba(var(--color-white)); transform:translateX(-100%); transition:transform .4s ease; }
@media (hover: hover) and (pointer: fine){
  .ic-s-btn:hover { color:rgb(var(--color-black)); }
  .ic-s-btn:hover::after { transform:translateX(0); }
}
@media (max-width:768px){
  .ic-s-btn { max-width:100%; font-size:1.0rem; }
}