@charset "utf-8";

 /*-----------[�X�N�[�����X�g]--------------*/
ul.cp_list {
  padding: 0.5em;
  list-style: none;
  font-size:clamp(0.4rem, calc(0.4vw + 0.7rem), 1.4rem);;
  font-weight: bold;
}

ul.cp_list li {
  position: relative;
  padding: 0.5em 1em 0.3em 2.3em;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,100,178,1);
  text-align: center;
}

ul.cp_list li:after,
ul.cp_list li:before {
  position: absolute;
  content:'';
  transform: rotate(45deg);
}

ul.cp_list li:before {
  top: 0.8em;
  left: 0.4em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(0,100,178,1);
}

ul.cp_list li:after {
  top: 1.0em;
  left: 0.9em;
  width: 14px;
  height: 14px;
  background: rgba(184,224,237,0.8);
  transform: rotate(60deg);
}

ul.cp_list li:hover::before {
  transform: rotate(15deg);
}

ul.cp_list li:hover::after {
  transform: rotate(180deg);
}

@media screen and (max-width:768px){
ul.cp_list {
  padding: 0.4em;
  list-style: none;
  font-size:clamp(0.4rem, calc(0.4vw + 0.7rem), 1.3rem);;
  font-weight: normal;
}
}

 /*-----------[�������̃{�b�N�X]--------------*/
.boxpaper {
  width: 100%;
  margin: 0 auto;
  padding: 1.5em 2em;
  /* box-shadow: ������ �c���� �ڂ��� �L���� �e�F */
  /* �L������}�C�i�X�ɂ���ƁA�����������ɂȂ� */
  box-shadow: 0 10px 6px -6px rgba(119,119,119,0.4);
  background: rgba(255,255,255,0.75);
}

@media screen and (max-width: 767px){
.boxpaper {
  width: 100%;
  margin: 0 auto;
  padding: 1em 0.5em;
  text-align: center;
  /* box-shadow: ������ �c���� �ڂ��� �L���� �e�F */
  /* �L������}�C�i�X�ɂ���ƁA�����������ɂȂ� */
  box-shadow: 0 10px 6px -6px rgba(119,119,119,0.4);
  background: rgba(255,255,255,0.75);
}
}

 /*-----------[���E���F��]--------------*/
.spikes {
  position: relative;
  background: #FFF;
  height: 1vh;
  width: 100%;
}

.spikes::after {
  content: '';
  position: absolute;
  right: 0;
  left: -0%;
  top: 100%;
  display: block;
  height: 10px;
  background-size: 10px 100%;
  background-image: linear-gradient(135deg, #FFF 25%, transparent 25%), linear-gradient(225deg, #FFF 25%, transparent 25%);
  background-position: 0 0;
}

.triangle {
  position: relative;
  background: #FFF;
  height: 1vh;
}

.triangle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #FFF transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}
 /*-----------[�J���[���j���[]--------------*/
.navrainbow {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 35px;
  background-color: #F0F0F0DD;
  border-top: 3px solid #7777AA8A;
  font-size: 0;
  z-index: 1000000;
}
.navrainbow a {
  line-height: 35px;
  height: 100%;
  margin: 0 1%;
  padding: 0 auto;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: #000;
  cursor: pointer;
}
.navrainbow a:hover {
  color: #FFF;
  opacity: 1.0;
  transition: all .5s ease 0s;
}

.navrainbow .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index:0;
  transition: all .5s ease 0s;
  border-radius: 15px;
}
a:nth-child(1) {
  width: 23%;
}
a:nth-child(2) {
  width: 23%;
}
a:nth-child(3) {
  width: 23%;
}
a:nth-child(4) {
  width: 23%;
}
.navrainbow .start-home, a:nth-child(1):hover~.animation {
  width: 23%;
  left: 1%;
  background-color: #55acee;
}
.navrainbow .start-about, a:nth-child(2):hover~.animation {
  width: 23%;
  left: 26%;
  background-color: #c4302b;
}
.navrainbow .start-blog, a:nth-child(3):hover~.animation {
  width: 23%;
  left: 51%;
  background-color: #3b5997;
}
.navrainbow .start-portefolio, a:nth-child(4):hover~.animation {
  width: 23%;
  left: 76%;
  background: -webkit-linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

 /*-----------[�J���[���j���[A]--------------*/
.menubtn {
  position: relative;
  height:40px;
  line-height:40px;
  text-align: center;
  font-size:0;
}

.menubtn a{
  position:relative;
  display:inline-block;
  background: #FFFFFFF9;
  text-align: center;
  border-radius:1px;
  width: calc(100% /6);
  overflow:hidden;
  cursor:pointer;
}

.menubtn a:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  content: "";
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
  background: linear-gradient(90deg,#20b5b2,#39d2f8);
}

.menubtn a:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

.menubtn_text {
  position:absolute !important;
  left:0 !important;
  display:block !important;
  height:100%;
  width:100%;
  color:#777;
  font-size:clamp(0.4rem, calc(0.4vw + 0.75rem), 1.4rem);;
  font-weight:bold;
  text-align:center;
  transition:all .3s
}

.menubtn_text:nth-child(1){
  top:0;
}

.menubtn_text:nth-child(2){
  top:-100%;
}

.menubtn a:hover {
  transition:all .2s;
  opacity:1;
}

.menubtn a:hover .menubtn_text:nth-child(1){
  top:100%;
  color:#FFF;
}

.menubtn a:hover .menubtn_text:nth-child(2){
  top:0;
  color:#FFF;
}

 /*----------[�摜���S�Œ�]--------------*/
.imglogo {
  width: 220px;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  -moz-user-select:none;
  -khtml-user-select:none;
  -khtml-user-drag:none;
}

 /*----------[PC�Ŕ�\��]--------------*/
.pcnot{
@media screen and (min-width:768px){
   display:none;
}
}

 /*----------[�X�}�z�Ŕ�\��]--------------*/
.smnot{
@media screen and (max-width:768px){
   display:none;
}
}

 /*----------[���o����X�C�b�`]--------------*/
.center {
  margin: 10px auto 10px;
  width: 100%;
  text-align: center;
}
.center a:hover {
  opacity: 1;
}
.swt,
button {
  display:inline-block;
  position: relative;
  width: 35%;
  min-width: 15%;
  max-width: 30%;
  height: clamp(2rem, calc(3vw + 2rem), 4rem);;
  padding: 3px 2px;
  background: #FFF;
  border-radius: 3px;
  font-size: clamp(0.50rem, calc(0.50vw + 0.75rem), 1.7rem);;
  font-family: "shippori", serif;
  letter-spacing: 1px;
  border: 1px solid #1d1d1d;
  transition:
    color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1),
    background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  cursor: pointer;
  overflow: hidden;
}

@media screen and (max-width:768px){
  .swt,
  button {
    width: auto;
    min-width: 30%;
  }
}

.swt:hover,
button:hover {
  border-radius: 3px;
  background: #F0FFFF;
}
.btn-bordera {
  background-color: #2E75B6;
  color: #FFF;
}
.btn-bordera:hover {
  color: #2E75B6;
}
.btn-borderb {
  background-color: #548235;
  color: #FFF;
}
.btn-borderb:hover {
  color: #548235;
}
.btn-borderc {
  background-color: #FFC000;
  color: #FFF;
}
.btn-borderc:hover {
  color: #FFC000;
}
.btn-arrow {
  position: relative;
  margin-left:1%;
  margin-right:1%;
  transition: background-color 0ms ease-out;
}
.btn-arrow span {
  display: inline-block;
  position: relative;
  transition: all 200ms ease-out;
  will-change: transform;
}
.btn-arrow:hover span {
  transform: translate3d(-1rem, 0, 0);
}
.btn-arrow svg {
  position: absolute;
  width: 1em;
  right: 0px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 200ms ease-out;
  will-change: right, opacity;
}
.btn-arrow svg * {
  stroke-width: 3;
  stroke-color: transparent;
}
.btn-arrow:hover svg {
  opacity: 1;
  right: -2rem;
}

 /*----------[NEWS�G���A]--------------*/
.news-list{
  list-style: none outside;
  overflow-y: auto;
  margin: 0 auto;
  height: 250px;
  border-bottom: 1px solid #CCC;
  border-top: 2px solid #CCC;
  border-left: double 3px #668ad8;
  border-right: double 3px #668ad8;
  background-color: rgba(245,245,245,0.3);
}
.news-list::-webkit-scrollbar {
  width: 6px;
  height: 10px;
  border-radius: 20px;
}
.news-list::-webkit-scrollbar-thumb {
  background-color: #C0C0C0;
  border-radius: 25px;
}
.news-list::-webkit-scrollbar-thumb:hover {
  background-color: #A9A9A9;
  border-radius: 25px;
}
.news-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.2);
  border-radius: 25px;
}

.news-list .item{
  width: 97%;
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  margin:0 auto;
  padding: 6px 5px;
  border-bottom: 1px dashed #CCC;
  vertical-align: middle;
  color: #1e366a;
}

.news-list .item .dc{
  display: block;
  width: 15%;
  min-width: 120px;
  text-align: center;
}
.news-list .item .dc .date{
  margin: 0;
  padding: 2px;
  font-size: 14px;
  font-weight: bold;
  color: #1e366a;
}
.news-list .item .dc .category{
  width: 60%;
  line-height: 1.1;
  margin: auto;
  padding: 3px 8px;
  border-radius: 5px;
  color: #FFF;
  font-size: 12px;
  background: linear-gradient(90deg, #20B5B2FF, #39D2F8FF);
}
.news-list .item .dc .category2{
  width: 60%;
  line-height: 1.1;
  margin: auto;
  padding: 3px 8px;
  border-radius: 5px;
  color: #FFF;
  font-size: 12px;
  background: linear-gradient(90deg, #E67D00FF, #F4AF1BFF);
}
.news-list .item .com{
  text-decoration: underline;
  text-align:start;
  margin: auto 0;
}

@media screen and (max-width: 767px){
.news-list{
  font-size: 1.1em;
  height: 200px;
}
.news-list::-webkit-scrollbar {
  width: 4px;
  height: 8px;
  border-radius: 20px;
}

.news-list .item{
  font-size: 0.8em;
  flex-wrap: wrap;
}

.news-list .item .dc{
  display: flex;
  width: 15%;
  min-width: 90px;
}
.news-list .item .dc .date{
  font-size: 0.9rem;
  margin: 5px;
}
.news-list .item .dc .category{
  width: 100%;
  line-height: 1;
  margin: auto;
  padding: 5px;
  font-size: 12px;
  white-space: nowrap;
}
.news-list .item .dc .category2{
  width: 100%;
  line-height: 1;
  margin: auto;
  padding: 5px;
  font-size: 12px;
  white-space: nowrap;
}
}

 /*----------[���ݎʐ^���o��]--------------*/

.chara {
  display:inherit;
  text-align: center;
  margin: 5px auto;
}

.chara_text {
 font-size: 20px;
 text-align: left;
}

.chara_pict {
  width: 40%;
  margin-left: 2%;
}

.chara_pict img {
  width: 100%;
}

@media screen and (min-width: 767px){
.chara {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 40px;
}

.chara_pict img {
  width: 90%;
}

.chara:nth-child(even) {
  flex-direction: row-reverse;
}
.chara:nth-child(even) .chara_text {
  text-align: right;
}
.chara:nth-child(even) .chara_pict {
  margin-left: 0;
  margin-right: 50%;
}
}
 /*-----------[�摜�̖����X���C�h]--------------*/

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 6);
}
.scroll-infinity__item>img {
  width: 100%;
}

 /*-----------[���F�d�؂��]--------------*/
.coloredhr {
  position: relative;
	height: 2px;
	border-width: 0;
	background-color: #00bcd4;
	background-image: -webkit-linear-gradient( 135deg, #F7A6B7 10%, #59CEE3 100%);
	background-image: linear-gradient( 135deg, #F7A6B7 10%, #59CEE3 100%);
}
 /*-----------[�O���X�{�b�N�X]--------------*/
.glass {
  position: relative;
  width: 100%;
  max-width: 1100px;
  padding: 15px;
  border-radius: 10px;
  background-color: rgba(180, 200, 255, 0.1); /* �w�i�F */
  border: 2px solid rgba(255, 255, 255, 0.5); /* �{�[�_�[ */
  border-right-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(1px); /* �ڂ����G�t�F�N�g */
  backdrop-filter: blur(1px);
  box-shadow: 0 3px 15px rgba(120, 110, 80, 0.4); /* �����e */
}


/*------------[�n���o�[�K�[]------------------*/
.smaburg {
  position: fixed;
  top: 30px;
  right: 5px;
  margin: 0 auto;
  width: 45px;
  height: 45px;
  font-size: 0;
  background-color: #FFFFFFD0;
  z-index: 999999;
}

/* Nav items */
.smamenu {
  list-style: none;
  position: fixed;
  top:0;
  left:0;
  width: 50vw;
  padding: 70px 0 10px 0;
  clear: both;
  height: 100vh;
  background: #55AAFFF0;
  z-index: 999;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transform: scale(1, 0);
  transform-origin: top;
}

/* Hamburger menu button */
.menu-btn:checked ~ .smamenu {
  transform: scale(1, 1);
  transform-origin: top;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

/* Hamburger menbu text */
.smamenu a {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 16px;
  text-transform: capitalize;
  color: #FF0;
  opacity: 0;
  transition: 0.5s;
}

.smamenu a:hover {
  letter-spacing: 3px;
  text-shadow:
	0 0 10px #fff,
	0 0 20px #fff,
	0 0 40px #b2ebf5,
	0 0 80px #b2ebf5,
	0 0 90px #b2ebf5 ;
  transition: 0s;
}

.smamenu li {
  border-bottom: 2px dotted #FFF;
  padding: 25px 20px 5px;
  margin: 0 25px;
  opacity: 0;
  transition: 0.5s;
}

.menu-btn:checked ~ .smamenu a,
.menu-btn:checked ~ .smamenu li {
  opacity: 1;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}


.menu-btn {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 24px 14px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.navicon {
  background: #888;
  display: block;
  height: 3px;
  width: 26px;
  position: fixed;
  right: 13px;
  top: 50px;
  z-index: 999999;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #888;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
  top: 9px;
}

.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
  top: 0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  bottom: 0;
}

.menu-btn:checked ~ .menu-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger Menu Animation End */