/* all page */
/* color */
.txt_color1{color: #279AF1;} /* メインカラー */
.txt_color2{color: #f17548;} /* サブカラー */
.txt_color3{color: #0066d4;} /* アクセントカラー1 */
.txt_color4{color: #E4E2D5} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #279AF1;} /* メインカラー */
.bg_color2{background-color: #f17548;} /* サブカラー */
.bg_color3{background-color: #279AF1;} /* アクセントカラー1 */
.bg_color4{background-color: #e6f5ff;} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #279AF1;}
.border_color2{border-color: #ff9652;}
.border_color3{border-color: #52b5ff;}
.border_color4{border-color: #E4E2D5}

.linkStyle{
    color: #279AF1;
}

/*フォント*/
.font_en {
    font-family: 'Zen Kaku Gothic New', 'Raleway', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif" !important;
}
h2,h3{
	font-weight: bold;
}

/* top ----------------*/

/* header */
#main_menu {
    margin-bottom: 50px;
}
#main_menu ul li a {
    padding: 10px 0!important;
    margin-bottom: 20px;
    text-align: center;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: bold;
}
#main_menu ul li a:hover {
    transform: translateY(-5px);
    color: #de6b48;
	padding-left: 0;
}
#main_menu ul li a::before {
    display: none;
}

/* main img */
#main_img {
    min-height: auto!important;
}
#main_img .txt1 {
    top: auto;
    bottom: 20%;
    left: auto;
	right: 1vw;
    z-index: 2;
    width: 50%;
    transform: none;
}
#main_img .txt1 img {
    max-width: 650px;
	min-height: auto;
	max-height: none;
}

/* main */
/* hukidasi animation ------------------------------------*/
.fadein{
     opacity: 0;
}
.fadein.fadetrans{
	animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon{
  0% {
    transform: translateY(140px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/* intro */
#contents_box{
	margin-bottom: 50px;
	margin-top: -10px;
}
#contents1{
	background-color: #52b5ff;
	text-align: center;
	max-width: 100%;
}
#contents1 h2{
	position: relative;
	text-align: center;
	display: inline-block;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	background: #FFF;
	border: solid 3px #fff;
	box-sizing: border-box;
	border-radius: 30px;
	font-weight: bold;
}
#contents1 h2::before{
	content: "";width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
#contents1 h2::after{
	content: "";
	background-image: url("./Dup/img/intro.png");
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 150px;
	width: 150px;
	height: 250px;
	position: absolute;
	bottom: -200px;
	left: 47%;
	transform: translateX(-50%);
}
#contents1 p{
	margin-top: 195px;
	text-align: left;
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
}

/* contents */
#contents2{
	text-align: right;
}
#contents2 h2{
	color: #fff;
	position: relative;
	display: inline-block;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	background: #52b5ff;
	border: solid 3px #52b5ff;
	box-sizing: border-box;
	border-radius: 30px;
	font-weight: bold;
}
#contents2 h2::before{
	content: "";width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent #52b5ff;
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);
	z-index: -1;
}
#contents2 p{
	text-align: left;
}
#contents3{
	max-width: none;
	position: relative;
}
#contents3::before{
	content: "";
	background-color: #52b5ff;
	width: 100%;
	height: 85%;
	position: absolute;
	top: 100px;
	left: 0;
	z-index: -1;
}
#contents3::after{
	content: "";
	background-image: url("./Dup/img/content.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 160px;
	width: 160px;
	height: 400px;
	position: absolute;
	bottom: -140px;
	right: 5vw;
	z-index: 1;
}
#contents3 > div{
	max-width: 1280px;
}
#contents3 > div > div{
	position: relative;
}
#contents3 > div > div:nth-of-type(1)::before{
	content: "01";
	color: #f17548;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 100px;
	font-weight: bold;
	position: absolute;
	top: -90px;
	left: -20px;
	opacity: 0.8;
	z-index: 5;
}
#contents3 > div > div:nth-of-type(2)::before{
	content: "02";
	color: #f17548;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: 100px;
	font-weight: bold;
	position: absolute;
	top: -90px;
	left: -20px;
	opacity: 0.8;
	z-index: 5;
}
#contents3 h3{
	background-color: #fff;
	padding: 20px 20px 0 20px;
	transform: translateY(-50px);
	width: 80%;
	margin: 0 auto;
	border-radius: 10px 10px 0 0;
}
#contents3 p{
	background-color: #fff;
	padding: 20px;
	transform: translateY(-50px);
	width: 80%;
	margin: 0 auto;
	border-radius: 0 0 10px 10px;
}

/* topcms */
.cms_title::before{
	background-color: #5b5b5b;
}
.cms_title p{
	color: #f17548;
	font-weight: bold;
}
.button:hover::after {
    box-shadow: inset 0 0 0 15em #279af1 !important;
}

/* footer */



/* under page */
#page_title h2, #page_title p{
	text-shadow: none;
}
#page_title p{
	color: #f17548;
	font-weight: bold;
}
#page_title .page_box::before{
	background-color: #5b5b5b;
}
.button2:hover{
	box-shadow: none;
	color: #fff;
	background-color: #f17548;
	border: 1px solid #f17548;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    .pc_box .contact_bt a{
        padding: 15px;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#contents3::after{
		background-size: 150px;
		width: 150px;
		height: 400px;
		bottom: -100px;
		right: 2vw;
	}
	
	header{
	    position: relative;
	}
	header .banner{
	    top: 0;
	    left: 20px;
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#main_img .txt1 {
		width: 60%;
		bottom: 10%;
		right: 5vw;
	}
	#contents1 h2::after{
		background-size: 130px;
		width: 130px;
		bottom: -180px;
	}
	#contents1 p{
		margin-top: 170px;
	}
	#contents2 {
		text-align: center;
	}
	#contents2 p {
		text-align: left;
	}
	#contents2 h2::before{
		border-width: 15px 15px 0 15px;
		border-color: #52b5ff transparent transparent transparent;
		top: auto;
		right: auto;
		bottom: -15px;
		left: 50%;
		transform: translateX(-50%);
	}
	#contents3{
		margin-top: 30px;
	}
	#contents3 > div > div:nth-of-type(1)::before{
		font-size: 80px;
		top: -70px;
	}
	#contents3 > div > div:nth-of-type(2)::before{
		font-size: 80px;
		top: -70px;
	}
    #contents3::before{
    	height: 95%;
    }
	#contents3::after{
		background-size: 110px;
		width: 110px;
		bottom: -120px;
	}
	
	header .banner{
	    top: -20px;
	    left: 0;
	    max-width: 110px;
	}
	header .banner a{
	    padding: 21px 5px;
	}
	
}

/*20211122修正*/
.txt_color1{color: #f17548;}
.cate_list li a{
    color: #f17548;
    border-color: #f17548;
}

/*20211201修正*/
.page04 #page_title{
    position: relative;
}
.page04 #page_title::before{
    content: "";
	background-image: url("./Dup/img/menu_hukidasi.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 350px;
	width: 350px;
	height: 200px;
	position: absolute;
	bottom: 50px;
	right: 1vw;
	z-index: 2;
	transform: rotate(4deg);
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .page04 #page_title::before{
    	background-size: 300px;
    	width: 300px;
    	bottom: 20px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .page04 #page_title::before{
    	background-size: 220px;
    	width: 220px;
    }
	
}

/*20211214修正*/
.bg_color3{background-color: #aed265;} /* アクセントカラー1 */
#contents3::before{
	background-color: #aed265;
}

/*20220128追加*/
#main_img .txt1 {
    bottom: 6%;
    width: 43%;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #main_img .txt1 {
        width: 50%;
    }
}