﻿/* all page */
/* color */
.txt_color1{color: #F7CC38} /* メインカラー */
.txt_color2{color: #43D9C5} /* サブカラー */
.txt_color3{color: #D94352} /* アクセントカラー1 */
.txt_color4{color: #CECACA} /* アクセントカラー2 */
.txt_color5{color: #F3F2EE} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #F7CC38} /* メインカラー */
.bg_color2{background-color: #43D9C5} /* サブカラー */
.bg_color3{background-color: #D94352} /* アクセントカラー1 */
.bg_color4{background-color: #CECACA} /* アクセントカラー2 */
.bg_color5{background-color: #fffedb;}/*  アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #F7CC38}
.border_color2{border-color: #43D9C5}
.border_color3{border-color: #D94352}
.border_color4{border-color: #CECACA}
.border_color5{border-color: #e0dfda;}

.linkStyle{
    color: #29a696;
}

/*フォント*/
header .pc_nav li a span, #sp_nav .sp_nav_inner .l-menu ul li a, #con1 h2, #con2 > div p:nth-of-type(1), #con3 .title .en, #con3 .box .txt_title, #con3 .box h3, #topCms .cmstitle .en, .footer_contact h4, .footer_contact p, .f_sitemap_inner li a, .footer p, footer .copy, #page_title, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, .pagetitle h2, a[href^="tel:"], .pager li a  {font-family: 'Zen Maru Gothic', "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;}

#fakeloader .fl {
    max-width: 250px!important;
}

/* top ----------------*/
#page1{
	overflow: hidden;
}
.button,
a.button,
button.button {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #333;
  border-radius: 0.5rem;
}
.button-wrap {
    text-align: center;
    max-width: 1000px;
    margin: -50px auto 100px;
    z-index: 2;
    position: relative;
}
a.button-c {
    font-size: 30px;
    width: 100%;
    position: relative;
    padding: 0px 10px 30px;
    background: #fff100;
    -webkit-box-shadow: 0 5px 0 #2c9d60;
    box-shadow: 0 5px 0 #ccc100;
}
a.button-c span {
    font-size: 16px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 320px;
    padding: 10px 10px;
    border: 2px solid #333;
    border-radius: 0.5rem;
    background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
a.button-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #333;
  background: #fff100;
  -webkit-box-shadow: 0 2px 0 #ccc100;
  box-shadow: 0 2px 0 #ccc100;
}
a.button-c:hover:before {
  left: 2rem;
}

/* header */
.logo1 {
    max-width: 180px!important;
}

/* main img */
.topimg1{
	position: relative;
	padding-left: 100px;
    padding-right: 100px;
}
.topimg1 img{
	border-radius: 50px;
	z-index: 1;
	position: relative;
}
/* アニメーション */
.ani_fadein{
	display: none;
}
.ani {
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: scale(0.6);
  }

  to {
    opacity: 1;
      transform: scale(1);
  }
}
.topimg1 .round{
	width: 250px;
    z-index: 2;
    position: absolute;
    bottom: -8%;
    right: 11%;
	animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
}
.topimg1 .round2{
	width: 200px;
	z-index: 3;
	position: absolute;
	bottom: 4%;
    right: 8%;
	animation: fuwafuwa 3.5s infinite ease-in-out .8s alternate;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -10px);
  }
  100% {
    transform:translate(0, 0);
  }
}

.animate {
  opacity: 0;
  transition: all 0.5s;
  transform: translateY(60px);
}
.animate.show {
  opacity: 1;
  transform: translateY(0);
}
.animate.show:nth-of-type(1) {
  transition-delay: 0.3s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.6s;
}
.animate.show:nth-of-type(3) {
  transition-delay: 0.9s;
}
/*bg circle*/
.circle{
    border-radius: 100%;
	z-index: 0;
}
.cir01{
	background-color: #fff94d;
    width: 480px;
    height: 440px;
    top: -5%;
    left: -13%;
animation-delay: 0.3s;
}
.cir02{
	background-color: #43d9c5;
    width: 430px;
    height: 430px;
    top: -37%;
    left: 2%;
animation-delay: 0.6s;
}
.cir03{
	background-color: #f6c92e;
    width: 500px;
    height: 500px;
    top: 13%;
    right: -12%;
animation-delay: 0.1s;
}

/* main */
#con2, #topCms{
	background-color: #affff4;
    background-image: url('./Dup/img/con_bg.png');
    background-size: 100%;
    background-position: top left;
}
.con1_squ {
    z-index: 1;
}

/* contents */
.topTxt1{
	display: none;
}
#con1 h2{
	margin-top: 0;
	font-weight: bold;
	background:linear-gradient(transparent 60%, #ff6 60%);
	display: inline-block;
	margin-bottom: 20px;
}
#con1 .con1_inner p{
	text-align: left;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
#con2 .con2_text{
	background-color: #fff;
    padding: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
#con2 .con2_text p:nth-of-type(1){
	color: #1a1a1a;
	font-weight: bold;
	position: relative;
    display: inline-block;
    margin: 0 0 1rem -40px;
    padding: 1rem 3rem;
    color: #fff;
    border-radius: 0 100vh 100vh 0;
    background: #43D9C5;
    -webkit-box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
}
#con2 .con2_text p:nth-of-type(1):before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #007666;
  border-left: 10px solid transparent;
}
#con2 .box_wrap{
	align-items: flex-start;
}
#con3 .title .en {
    font-weight: bold;
}
#con3 .box{
	text-align: left;
}
#con3 .box .icon{
	display: none;
}
#con3 .box h3{
	font-size: 18px;
	font-weight: bold;
	position: relative;
	overflow: hidden;
    padding: 15px 20px 15px 90px;
    border-top: 2px solid #111;
    display: inline-block;
    border-radius: 12px 0 0 0;
}
#con3 .box h3 span {
  font-size: 30px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    color: #fff;
    padding: 0 20px 5px;
    border-radius: 10px 0 20px 10px;
    background: #111;
}

/* topcms */
.topCms .cms_1-a .box_wrap {
    align-items: flex-start!important;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

/* footer */
.footer_contact .f_contact_box h4{
    margin-bottom: 20px;
}
.footer > p{
    text-align: center;
}


/* under page */
.pagetitle_img{
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    mix-blend-mode: unset;
}
.cate_list li a:hover{
    background-color: #f6c92e;
    border: 1px solid #f6c92e;
    color: #fff;
}
.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    font-weight: bold;
}


/* IE */
@media all and (-ms-high-contrast: none){
    #page8 .contact_tel a{
        padding: 15px 40px;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.topimg1 {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cir01{
		width: 230px;
		height: 200px;
		left: -11%;
	}
	.cir02{
		width: 300px;
		height: 300px;
		left: 11%;
	}
	.cir03{
		width: 250px;
		height: 250px;
		top: -7%;
		right: -12%;
	}
	.topimg1 .round{
		width: 160px;
		bottom: -17%;
	}
	.topimg1 .round2{
		width: 120px;
		bottom: -1%;
	}
    #con3 .box h3{
    	font-size: 16px;
        padding: 5px 5px 5px 45px;
        letter-spacing: 1px;
    }
    #con3 .box h3 span {
      font-size: 21px;
        padding: 0 10px 2px;
    }
    .button-wrap {
        max-width: 600px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	.topimg1 {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 80px;
	}
	.topimg1 img {
		border-radius: 20px;
	}
	.cir01{
		width: 140px;
		height: 110px;
		position: fixed;
		top: -3%;
		left: -14%;
		z-index: 5;
	}
	.cir02{
		width: 150px;
		height: 150px;
		position: fixed;
		top: -12%;
		left: 14%;
		z-index: 5;
	}
	.cir03{
		width: 150px;
		height: 150px;
		top: -10%;
		right: -16%;
	}
	.topimg1 .round{
		width: 80px;
	}
	.topimg1 .round2{
		width: 60px;
		bottom: -2%;
	}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -5px);
  }
  100% {
    transform:translate(0, 0);
  }
}
	.footer_contact .f_contact_box h4 {
        font-size: 40px;
    }
    #con1 h2, #cms_2-b .cate_title {
        font-size: 18px;
    }
    #cms_2-b .box_title1{
        font-size: 15px;
    }
    #con2 .con2_text {
        padding: 20px;
    }
    #con2 .con2_text p:nth-of-type(1) {
        margin: 0 0 1rem -30px;
    }
    #con3 .box h3{
    	font-size: 19px;
        padding: 5px 5px 15px 65px;
        margin-bottom: 0;
        display: block;
        text-align: left;
    }
    #con3 .box h3 span {
      font-size: 25px;
      padding: 0 15px 2px;
    }
    .button-wrap {
        max-width: 300px;
        margin: -10px auto 50px;
    }
    a.button-c {
        font-size: 20px;
        padding: 0px 0px 20px;
    }
    a.button-c span {
        font-size: 12px;
        top: -20px;
        width: 220px;
        padding: 5px 10px;
    }
	
}

