﻿/* all page */
/* color */
.txt_color1{color: #3c71c0;} /* メインカラー */
.txt_color2{color: #43D9C5} /* サブカラー */
.txt_color3{color: #3c71c0;} /* アクセントカラー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: #3c71c0;} /* アクセントカラー1 */
.bg_color4{background-color: #CECACA} /* アクセントカラー2 */
.bg_color5{background-color: #d4fbff;} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #F7CC38}
.border_color2{border-color: #43D9C5}
.border_color3{border-color: #3c71c0;}
.border_color4{border-color: #CECACA}
.border_color5{border-color: #F3F2EE}

.hvr_txt_color3:hover{color: #3c71c0;} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #3c71c0;} /* アクセントカラー2 */

#sp_nav{background-color: #68f6e3;}

.linkStyle{
    color: #3c71c0;
    text-decoration: underline;
}

#page1{
    overflow: hidden;
}
#fakeloader .fl{
	max-width: 200px !important;
}

/*フォント*/
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, #topCms .cmstitle .en, #topCms .cmstitle .jp, .footer_contact h4, .footer_contact p, .f_sitemap_inner li a, .footer p, footer .copy, .pagetitle h2, .pagetitle p, .cate_list li a, .cate_list li .cate_no, .cate_title, .sub_cate_title, .box_title, .box_title1, a[href^="tel:"], .pager li a  {font-family: 'Zen Maru Gothic', "Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;}

/* top ----------------*/
/* アニメーション ------------------------------------*/
.round{
	opacity: 0.8;
	z-index: -1;
}
.rou01{
    width: 600px;
    top: 20vh;
    left: 10vw;
}
.rou02{
    width: 300px;
    top: -8vh;
    right: -3vw;
}
.rou03{
    width: 400px;
    top: -10vh;
    left: 1vw;
}
.rou04{
    width: 500px;
    top: 20%;
    right: -1vw;
}
.rou05{
    width: 400px;
    top: 40%;
    left: -5vw;
}
.rou06{
    width: 550px;
    top: 70%;
    left: -8vw;
}
.rou07{
    width: 650px;
    bottom: -30vh;
    right: -15vw;
}
.animate {
  opacity: 0;
  transform: scale(0.6);
  transition: all 3s;
}
.animate.show {
  opacity: 0.8;
  transform: scale(1);
  transition-delay: 0s;
}

/* header */
.logo1{
	max-width: 170px !important;
	padding-left: 0;
	padding-right: 40px;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img{
	max-width: 170px !important;
}

/* main img */
.topimg1{
	position: relative;
}
.topimg1 .catch{
	font-size: 90px;
	font-weight: bold;
	font-family: 'Noto Sans JP', sans-serif;
	position: absolute;
	bottom: 20px;
	right: 40px;
	text-shadow: 0 5px 10px rgba(68,170,238,0.8);
	line-height: 1.5;
}

/* main */

/* contents */
#con1 .topTxt1{
	display: none;
}
#con1 .con1_squ{
	display: none;
}
#con1 h2{
	margin-top: 0;
	font-weight: bold;
	border-bottom: 5px solid #43d9c5;
    display: inline-block;
}
#con1 h2 br{
	display: none;
}
#con2 > div p:nth-of-type(1){
	color: #302828;
	font-weight: bold;
}
#con2 .topimg2 img, #con2 .topimg3 img{
	border-radius: 10px !important;
}
#con3 .box .img{
	border-radius: 10px !important;
}
#con3 .box .icon{
	display: none;
}
#con3 .title .en{
	font-weight: bold;
}
#con3 .box .txt_title{
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #d4fbff;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 0 5px 0 0;
}
#con3 .box{
	position: relative;
}
#con3 .box::before{
	color: #F7CC38;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 90px;
	font-weight: bold;
	position: absolute;
	top: -90px;
	left: -30px;
	z-index: 5;
}
#con3 .box:nth-of-type(1)::before{
	content: "01";
}
#con3 .box:nth-of-type(2)::before{
	content: "02";
}
#con3 .box:nth-of-type(3)::before{
	content: "03";
}

/* topcms */
.topCms{
	border: none;
}
.cms_6-b .cate_box .box_txt2{
    background-color: rgba(255,255,255,0.6);
}

/* footer */
.footer_contact .f_contact_box h4{
    margin-bottom: 20px;
}
.footer > p{
    text-align: center;
}


/* under page */
.pagetitle_img {
    opacity: 0.5;
    background-repeat: no-repeat;
    background-size: cover;
}
.pagetitle h2{
    font-weight: bold;
}
.cate_list li a{
	-webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cate_list li a:hover {
    background-color: #4ae;
    color: #fff;
    border: 1px solid #4ae;
}

/* cms1 */
.pager li a{
    border-radius: 2px;
}

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    #page8 .contact_tel a{
        padding: 15px 40px!important;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .header{
        background-color: rgba(255,255,255,0.7);
    }
	.logo1{
		max-width: 200px!important;
	}
	.topimg1 .catch{
		font-size: 45px;
	}
	#con3 .box::before{
		font-size: 80px;
	}
	#con3 .box .txt_title{
		font-size: 15px;
	}
	.rou04 {
		width: 400px;
		right: -3vw;
	}
	.rou05{
		width: 350px;
		top: 33%;
	}
	.rou06{
		width: 390px;
	}
	.rou07 {
		right: -30vw;
	}
	
    .cate_list li a{
        padding: 10px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .header{
        padding-bottom: 10px;
    }
	.logo1{
		max-width: 170px!important;
	}
	.topimg1 .catch{
		font-size: 23px;
		right: 20px;
	}
    #con1 h2{
    	text-align: center;
    }
    #con1 h2 br{
    	display: block;
    }
	#con3 .box::before{
		font-size: 70px;
		top: -70px;
		left: -10px;
	}
	.rou01 {
		width: 450px;
		left: 0;
	}
	.rou02{
		width: 150px;
	}
	.rou03{
		width: 300px;
		top: -20vh;
	}
	.rou04{
		width: 350px;
		right: -30vw;
	}
	.rou05{
		width: 260px;
		left: -15vw;
	}
	.rou06{
		width: 380px;
		top: 62%;
		left: -28vw;
	}
	.rou07{
		width: 480px;
		bottom: -50vh;
	}
	.footer_contact .f_contact_box h4{
	    font-size: 35px;
	}
	
}
