/* 設定
------------------------------------------------------------ */
:root{
  --main-color: #617eff;
  --spice-color: navy;
  --line-color: #000;
  --placeholder-color: #444;
}
html{
  scroll-behavior: smooth;
}
body {
  width: 100%;
  font-size: 14px;
	font-family: 'Dosis';
  word-wrap: break-word;
  letter-spacing: 2px;
  margin: 0;
}
.wrapper{
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
header{
  height: 400px;
  position: absolute;
  top: 28vh;
  padding: 0 2em;
}
header p{
  color: #999;
}
h1{
  font-size: 2em;
  color: #444;
  display: inline;
  margin-inline-end: 0.5em;
}
p,ul,dl {
  margin: 10px;
}

section{
  padding: 3em 2em 5em 2em;
}
section:nth-child(odd) {
  background: #f1f2ff;
}
section:first-child {
  padding-block-start: 100px;
}
section:last-child {
  padding-block-end: 100px;
  background: var(--main-color);
}
section:last-child h2,
section:last-child p,
section:last-child li{
  color: #fff;
}

h2{
  font-size: 1.6em;
  font-weight: bold;
  color: var(--main-color);
  margin-inline-end: 0.5em;
}
	

/* ドリッピング
------------------------------------------------------------ */
.canvas {
  background: #617eff;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  z-index:-10;
}
.blend-area {
  width: 120%;
  height: 91vh;
  filter: blur(5px) contrast(9);
  background: #fff;
  overflow: hidden;
  position: absolute;
  left: -10px;
}
.bar {
  position: absolute;
  width: 100%;
  height: 20px;
  background: var(--main-color);
}
.drip {
  position: absolute;
  left: calc(70% - 25px);
  width: 50px;
  height: 60px;
  border-radius: 50%;
  background: var(--main-color);
  animation: drip-anim 4s linear infinite;
}
@keyframes drip-anim {
  0% {
    top: -25px;
    transform: scale(0.2);
  }
  90% {
    top: 20px;
    transform: scale(1);
  }
  100% {
    top: 100%;
    transform: scale(1);
  }
}

/* スキルのリストマーク
------------------------------------------------------------ */
.skill li {
  position: relative;
  padding-left: 20px;
  line-height: 2;
}
.skill li::before,
.skill li::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 5px;
  top: calc(1em - 4px);
}
.skill li::before {
  background-color: #8e02ff;
  animation: pulsate 3s infinite;
}
.skill li::after {
  background-color: var(--main-color);
}
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

/* 商品枠
------------------------------------------------------------ */
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item {
  border-radius: 10px;
  background: #edf;
  padding: 15px;
  text-align: center;
}
.item img {
  max-width: 100%;
  height: auto;
}
.item p {
  text-align: left;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



/* 特定商取引法に基づく表記（テーブル
------------------------------------------------------------ */
table {
  margin: 20px auto;
}
.tbl th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.tbl td {
　border: solid 1px #ddd;
  background: #fff;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl {
    width: 80%;
  }
  .tbl th,
  .tbl td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/* スキルのリストマーク
------------------------------------------------------------ */
.introduction h3{
  margin-block-start: 2em;
  font-weight: bold;
}
.introduction h3::before,.introduction h3::after{
  content: "−";
}
.annotation{
  display: flex;
  flex-wrap: wrap;
 }
.annotation dt,
.annotation dd{
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  line-height: 1.3em;
}
.annotation dt {
  width: 5%;
}
.annotation dd {
  width: 95%;
  margin-block-end: 10px;
}
.contact a{
  color: #202f55;
}
.contact p{
  padding-inline-start: 5em;
}



/* 問い合わせ回転ビジュアル
------------------------------------------------------------ */
.contact{
  position: relative;
}
.contactBtn{
  position: absolute;
  top: -1em;
  left: 1em;
  z-index: 0;
}
.contactBtn:hover{
  cursor: pointer;
}
.keyvisual__scroll {
  width:60px;
  height: 60px;
  margin: 0 auto;
  font-size: 18px;
}
.keyvisual__scroll svg {
  overflow: visible;
}
.keyvisual__scroll path {
  fill: none;
}
.keyvisual__scroll text {
  fill: #202f55;
}
.circleText {
  overflow: visible;
  animation: rotation 18s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* 問い合わせアコーディオン
------------------------------------------------------------ */
.toggle {
display: none;
}
.contact {
position: relative;
margin-bottom: 1em;
}
.title,
.formContent {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.8s;
}
.title::after,
.title::before {
content: "";
position: absolute;
z-index: 100;
left: 3em;
top: 0.5em;
width: 2.5px;
height: 1em;
background-color: #202f55;
transition: all 0.8s;
animation: illumination 10s linear infinite;
}
.title::after {
transform: rotate(90deg);
}
.formContent {
  max-height: 0;
  overflow: hidden;
}
.toggle:checked + .title + .formContent {
  max-height: 1000px;
  transition: all 1.5s;
}
.toggle:checked + .title::before {
  transform: rotate(90deg) !important;
}
@keyframes illumination {
  0% { background-color: navy; }
  33% { background-color: magenta; }
  66% { background-color: orange; }
  88% { background-color: olive; }
  100% { background-color: navy; }
}


/* 問い合わせフォーム
------------------------------------------------------------ */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row .col {
  padding: 0 20px;
  float: left;
  box-sizing: border-box;
}
.row .col.x-50 {
  width: 50%;
}
.row .col.x-100 {
  width: 100%;
}
.contactForm .form-field {
  position: relative;
  margin: 32px 0;
}
.contactForm .inputArea {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 1px 0;
  border-color: var(--spice-color);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contactForm .textArea{
  display: block;
  width: 100%;
  height: 72px;
  border-width: 0 0 1px 0;
  border-color: var(--spice-color);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.contactForm .inputArea:focus,
.contactForm .textArea:focus{
  outline: none;
  border-color: olivedrab;
  animation: border_anim .2s linear forwards;
}
@keyframes border_anim {
  0%{width: 0%;}
  100%{width: 100%;}
}
.contactForm .inputArea:focus + .label, 
.contactForm .inputArea.not-empty + .label,
.contactForm .textArea:focus + .label, 
.contactForm .textArea.not-empty + .label{
  transform: translateY(-24px);
}
.contactForm .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color:  var(--placeholder-color);
  cursor: text;
  transition: transform 0.2s ease-in-out;
}
.contactForm textArea + .label {
  position: absolute;
  left: 20px;
  top: 2px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--placeholder-color);
  cursor: text;
  transition: transform 0.2s ease-in-out;
}
.contactForm .btn {
  display: inline-block;
  background-color: var(--spice-color);
  color: #fff;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.note {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-family: Lusitana, serif;
  font-size: 16px;
  line-height: 21px;
}
.note .link {
  color: #888;
  text-decoration: none;
}
.note .link:hover {
  text-decoration: underline;
}


/* 問い合わせ確認
------------------------------------------------------------ */
.formCheck {
  z-index : 100;
  border : none;
  border-radius : 3%;
  width : 85%;
  height : 75%;
  margin : 2%;
  padding : 5%;
  position : fixed;
  outline: thick double #1ca132;
  background:rgba(255,255,255,0.97);
  overflow: scroll;

}
.formCheck h2 {
  text-align : center; 
}

.formCheck .confirmTxt {
  width : 80%;
  border : solid 1px #ccc;
  padding : 0.5em;
  font-size: 1.2em;
  margin-bottom : 3%;
  min-height : 10px;
}

.formCheck .hiddenTxt {
  visibility: hidden;
}

.controlSend {
  width : 90%;
  text-align : center;
  margin : auto ; padding : auto ;
  margin-top : 5%;}

.controlSend #send ,
.controlSend #back , 
.controlSend #close{
  display : inline-block;
  max-width: 180px;
  text-align: left;
  border: 2px solid #9ec34b;
  font-size: 16px;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
}
.controlSend #send:hover ,
.controlSend #back:hover ,
.controlSend #close{
  background-color: #9ec34b;
  border-color: #cbe585;
  color: #FFF;
}
.controlSend #back {
 margin-right : 5%;
}


/* メールみため
------------------------------------------------------------ */
/* 上 */
.mail {
    font-size: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-right: 0.8em solid transparent;
	border-left: 0.8em solid transparent;
	border-top: 0.6em solid var(--main-color);
	border-radius: 0.1em;
}
/* 下 */
.mail::before {
	position: absolute;
	content: "";
	top: -0.5em;
	left: -0.8em;
	width: 0;
	height: 0;
	border-top: 0.6em solid transparent;
	border-bottom: 0.5em solid var(--main-color);
	border-left: 0.8em solid var(--main-color);
	border-right: 0.8em solid var(--main-color);
	border-radius: 0 0 0.1em 0.1em;
}

	

/* フッターメニュー
------------------------------------------------------------ */
.tabbar {
  --primary: #275EFE;
  --background: #eff;
  --inactive: #99A3BA;
  --shadow: rgba(18, 22, 33, .24);
  --line: #CDD9ED;
  
  background: var(--background);
  box-shadow: 0 1px 4px -1px var(--shadow);
  
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 5px;
  
}
.tabbar ul {
  --x: 60px;
  margin: 0;
  padding: 0 12px;
  list-style: none;
  display: grid;
  position: relative;
  overflow: hidden;
  text-align: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tabbar ul:before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--x);
  background: var(--primary);
  width: 60px;
  margin-left: -30px;
  height: 40px;
}
.tabbar ul li {
  position: relative;
}
.tabbar ul li:before, 
.tabbar ul li:after {
  content: "";
  background: var(--background);
  height: 44px;
  width: 90%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -45%;
}
.tabbar ul li:before {
  border-radius: 0 48% 0 0;
}
.tabbar ul li:after {
  border-radius: 48% 0 0 0;
}
.tabbar ul li a {
  padding: 20px 0;
  display: block;
  text-decoration: none;
  position: relative;
  z-index: 1;
  color: var(--primary);
  transition: transform 0.2s ease;
}
.tabbar ul li a:active {
  transform: scale(0.9);
}
.tabbar ul li a:before, .tabbar ul li a:after {
  content: "";
  top: 0;
  left: 50%;
  position: absolute;
  background: var(--primary);
  border-radius: 1px;
  width: 2px;
  margin-left: -1px;
  transform-origin: 50% 0;
  transform: translateY(-14px) scaleX(0.6);
}
.tabbar ul li a:before {
  height: 8px;
}
.tabbar ul li a:after {
  height: 4px;
}
.tabbar ul li a div {
  background: var(--inactive);
  width: 24px;
  height: 24px;
  margin: 0 auto 4px auto;
}
.tabbar ul li a div:before {
  --y: -100%;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: translateY(var(--y));
  position: absolute;
  transition: transform 0.4s linear;
  background: var(--primary);
}
.tabbar ul li a span {
  display: block;
  font-weight: 500;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.36s linear;
}
.tabbar ul li.active:before {
  -webkit-animation: before 1.1s ease;
          animation: before 1.1s ease;
}
.tabbar ul li.active:after {
  -webkit-animation: after 1.1s ease;
          animation: after 1.1s ease;
}
.tabbar ul li.active a {
  -webkit-animation: bounce 0.9s linear 0.3s;
          animation: bounce 0.9s linear 0.3s;
}
.tabbar ul li.active a:before {
  -webkit-animation: drop 0.4s linear 0.1s forwards;
          animation: drop 0.4s linear 0.1s forwards;
}
.tabbar ul li.active a:after {
  -webkit-animation: drop 0.5s linear 0.13s forwards;
          animation: drop 0.5s linear 0.13s forwards;
}
.tabbar ul li.active a div:before {
  --y: 0;
  transition-delay: 0.3s;
}
.tabbar ul li.active a span {
  opacity: 1;
  transition-delay: 0.38s;
}
.tabbar ul li.calendar a div {
  -webkit-mask-box-image: url("../img/icon_top.svg");
  -webkit-mask: url("../img/icon_top.svg");
          mask: url("../img/icon_top.svg");
}
.tabbar ul li.skill a div {
  -webkit-mask-box-image: url("../img/icon_skill.svg");
  -webkit-mask: url("../img/icon_skill.svg");
          mask: url("../img/icon_skill.svg");
}
.tabbar ul li.notification a div {
  -webkit-mask-box-image: url("../img/icon_tokushoho.svg");
  -webkit-mask: url("../img/icon_tokushoho.svg");
          mask: url("../img/icon_tokushoho.svg");
}
.tabbar ul li.contact a div {
  -webkit-mask-box-image: url("../img/icon_contact.svg");
  -webkit-mask: url("../img/icon_contact.svg");
          mask: url("../img/icon_contact.svg");
}

@-webkit-keyframes bounce {
  40% {
    transform: translateY(9px);
  }
  55% {
    transform: translateY(-1px);
  }
  70% {
    transform: translateY(4px);
  }
}

@keyframes bounce {
  40% {
    transform: translateY(9px);
  }
  55% {
    transform: translateY(-1px);
  }
  70% {
    transform: translateY(4px);
  }
}
@-webkit-keyframes drop {
  50% {
    transform: translateY(10px) scaleY(1.2) scaleX(0.5);
  }
  100% {
    transform: translateY(20px) scaleY(0) scaleX(0.5);
  }
}
@keyframes drop {
  50% {
    transform: translateY(10px) scaleY(1.2) scaleX(0.5);
  }
  100% {
    transform: translateY(20px) scaleY(0) scaleX(0.5);
  }
}
@-webkit-keyframes before {
  45%, 55% {
    transform: translateX(-41px);
  }
}
@keyframes before {
  45%, 55% {
    transform: translateX(-41px);
  }
}
@-webkit-keyframes after {
  45%, 55% {
    transform: translateX(41px);
  }
}
@keyframes after {
  45%, 55% {
    transform: translateX(41px);
  }
}