/* all page */
/* color */
.txt_color1{color: #00afcc;} /* メインカラー */
.txt_color2{color: #ffd648;} /* サブカラー */
.txt_color3{color: #f25f3f;} /* アクセントカラー1 */

/* background-color */
.bg_color1{background-color: #00afcc;} /* メインカラー */
.bg_color2{background-color: #ffd648;} /* サブカラー */
.bg_color3{background-color: #f25f3f;} /* アクセントカラー1 */

/* border-color ※!important */
.border_color1{border-color: #00afcc;}
.border_color2{border-color: #ffd648;}
.border_color3{border-color: #f25f3f;}

.linkStyle{
    color: #333;
    text-decoration: underline;
}

/*固定バナー*/
.banner__fixed {
    position: fixed;
    bottom: 50px;
    right: 100px;
    z-index: 5;
	-webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.banner__fixed a {
    border-radius: 10px;
	padding: 5px 20px;
}
.banner__fixed a:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}

#fakeloader .fl {
    max-width: 200px !important;
}

/* top ----------------*/
#page1{
    overflow: hidden;
}
#con1 .con1_inner h2, #con2 > div p:nth-of-type(1), #con3 .title .en, .cmstitle .en, .pagetitle h2, .cate .cate_title{
	font-weight: bold;
	font-family: 'Kiwi Maru', serif;
}

/* header */
.logo1{
	max-width: 150px;
}

/* main img */
.topimg1{
	padding-top: 140px;
}

/* main */

/* intro */

/* contents */
#con2{
	position: relative;
}
#con2::before{
	content: "";
	background-image: url("./Dup/img/ink.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 700px;
	width: 700px;
	height: 600px;
	position: absolute;
	top: 0;
	left: -50px;
	z-index: -1;
}
#con2 > div p:nth-of-type(1){
	color: #fff;
	background-color: #ffd648;
	border-radius: 30px;
	text-align: center;
	margin-bottom: 20px;
}
#con2 > div p:nth-of-type(2){
	background-color: rgba(255,255,255,0.80);
}
#con3 .box h3{
	font-size: 18px;
	font-weight: bold;
	color: #00afcc;
}

/* hukidasi animation ------------------------------------*/
.hukidasi{
	max-width: 450px;
	position: absolute;
	top: -30vh;
	left: 5vw;
	opacity: 0;
}
.hukidasi.item.start{
	animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}
@keyframes zoomInAnime{
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 3px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 3px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

/* topcms */
#topCms::before{
	content: "";
	background-image: url("./Dup/img/ink3.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 700px;
	width: 700px;
	height: 600px;
	position: absolute;
	top: 0;
	right: -50px;
	z-index: -1;
}
#topCms::after{
	content: "";
	background-image: url("./Dup/img/ink2.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 700px;
	width: 700px;
	height: 600px;
	position: absolute;
	bottom: 10vh;
	left: -50px;
	z-index: -1;
}
#topCms .cms_2-b .box_title1{
    font-size: 13.5px;
    text-align: center;
    letter-spacing: 0.3px;
    background-color: #302828;
    color: #fff;
    border-radius: 30px;
    margin-bottom: 5px;
}

/* footer */
.footer_contact .f_contact_box h4{
    margin-bottom: 20px;
}
.footer > p{
    text-align: center;
}


/* under page */
.pagetitle h2{
    font-weight: normal;
}
.pagetitle_img {
    opacity: 0.5;
    background-repeat: no-repeat;
    background-size: cover;
}
.cate_list li a{
	-webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.cate_list li a:hover {
    background-color: #f25f3f;
    color: #fff;
    border: 1px solid #f25f3f;
}

/* cms1 */

/* cms2 */
#cms_2-b .box_img1{
    width: 13.66667%!important;
    margin-right: 20px;
}

/* cms3 */

/* cms4 */
#cms_4-a .cate_box_h, .cms_4-a .cate_box_h{
    border: solid 3px #00afcc;
}
#cms_4-a .box_img1::before, #cms_4-a .box_img2::before, .cms_4-a .box_img1::before, .cms_4-a .box_img2::before{
    position: absolute;
    width: 100px;
    font-size: 14px;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
#cms_4-a .box_img1::before, .cms_4-a .box_img1::before{
    content: "Before";
    background-color: #00afcc;
    color: #fff;
}
#cms_4-a .box_img2::before, .cms_4-a .box_img2::before{
    content: "After";
    background-color: #fff;
    color: #00afcc;
}

/* cms5 */
#cms_5-c .box_title1 .icon,.cms_5-c .box_title1 .icon{
  position: absolute;
  left: -150px;
  top: 0;
     top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
      width: 100px;
}
#cms_5-c .box_title1::after,.cms_5-c .box_title1::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #00afcc;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
#cms_5-c .box_txt1,.cms_5-c .box_txt1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #333;
  background-color: #ffecaa;
  margin-right: 150px;
   margin-left: 150px;
   padding-left: 50px;
}
.cms_5-c .box_txt1::before ,#cms_5-c .box_txt1::before{
    top: 13px;
    left: 20px;
}
#cms_5-c .box_txt1 .icon,.cms_5-c .box_txt1 .icon{
  position: absolute;
  right: -150px;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
      width: 100px;
}
#cms_5-c .box_txt1::after,.cms_5-c .box_txt1::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #ffecaa;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
#cms_5-c .box_title1,.cms_5-c .box_title1{
    position: relative;
    padding: 20px;
    color: #ffffff;
    border-radius: 10px;
    background-color: #00afcc;
    margin-left: 150px;
    margin-right: 150px;
    padding-left: 50px;
}
.cms_5-c .box_title1::before,#cms_5-c .box_title1::before {
    top: 15px;
    left: 20px;
}

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    #page8 .contact_tel a{
        padding: 20px 40px 20px;
    }
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.topimg1 {
		padding-top: 110px;
	}
	#con2::before {
		background-size: 600px;
		width: 600px;
		height: 500px;
	}
	.hukidasi {
		max-width: 330px;
		top: -26vh;
		left: 0;
	}
	footer .copy{
	    padding-bottom: 130px;
	}
	#cms_2-b .cate_box{
	    padding: 20px;
	}
	#cms_2-b .box_img1 {
        width: 20.66667%!important;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	.topimg1 {
		padding-top: 100px;
	}
	.banner__fixed {
		right: 80px;
	}
	.banner__fixed a {
		padding: 5px 10px;
	}
	.hukidasi {
		max-width: 200px;
		top: -25vh;
	}
	.footer_contact .f_contact_box h4 {
        font-size: 40px;
    }
	
    #cms_5-c .box_title1, .cms_5-c .box_title1 {
        margin-right: 0;
        font-size: 14px;
        margin-left: 110px;
    }
    #cms_5-c .box_txt1, .cms_5-c .box_txt1 {
        margin-left: 0;
        font-size: 12px;
        margin-right: 110px;
    }
    #cms_5-c .box_title1 .icon, .cms_5-c .box_title1 .icon {
        left: -110px;
        width: 80px;
    }
    #cms_5-c .box_txt1 .icon, .cms_5-c .box_txt1 .icon {
        right: -110px;
        width: 80px;
        top: 40px;
    }
	#cms_2-b .box_img1 {
        width: 60%!important;
        margin-right: 0;
        margin-left: 20%;
    }
	
}

/*20211112公開後修正*/
.youtube_box{
    width: 70%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    margin-bottom: 100px;
}
.youtube_box iframe{
    width: 100%;
    height: 100%;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .youtube_box{
        width: 100%;
        margin-bottom: 50px;
    }
}