﻿/* all page */
/* color */
body, .txt_color_nomal {color: #111;}
.txt_color1{color: #003fbc;} /* メインカラー */
.txt_color2{color: #697A84} /* サブカラー */
.txt_color3{color: #302D2A} /* アクセントカラー1 */
.txt_color4{color: #E6EAED} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #83d6f7;} /* メインカラー */
.bg_color2{background-color: #697A84} /* サブカラー */
.bg_color3{background-color: #302D2A} /* アクセントカラー1 */
.bg_color4{background-color: #E6EAED} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #7ac1dc;}
.border_color2{border-color: #697A84}
.border_color3{border-color: #302D2A}
.border_color4{border-color: #c7c7c7;}

.linkStyle{
    color: #333;
    text-decoration: underline;
}

#wrap{
	background-image: url("./Dup/img/bg_wall.png");
	background-position: left top;
	background-size: auto;
}

/*contact icon*/
.fa-envelope:before {
    content: "\f075" !important;
}

.is-show {
    background-color: rgba(255,255,255,0.9);
}
.drawer-nav {
    background-color: rgba(255,255,255,0.90);
}

/* top ----------------*/

/* header */
.logo {
    padding-top: 30px;
}
.logo img {
    width: 100% !important;
}
.clone-nav #logo .logo, .all_header #logo .logo{
    padding-top: 0;
}

/* main img */
#main_img{
	position: relative;
}
#main_img .catch{
	max-width: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
}
#main_img::before {
	content: "";
	background-color: rgba(106,167,255,0.2);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}

/* main */

/* intro */
#intro {
    height: 350px;
    max-height: 350px;
}
#intro #intro_txt h2{
    border-left: 1px solid;
    border-right: 1px solid;
	padding: 0 10px;
}

/* contents */
#contents .box h3:before{
	display: none;
}
#contents .box h3 {
    margin-left: 0;
}
#contents .back_color2 .contents_box {
	position: relative;
}
#contents .box h3, #contents .box p {
	position: relative;
	z-index: 1;
}
#contents .back_color2 .contents_box::before {
    position: absolute;
    font-size: 90px;
    left: 25px;
    top: 0;
    border-top: solid 5px #065da8;
    display: inline-block;
    color: #d4f7fc;
    line-height: 1;
}
#contents .back_color2 .contents_box:nth-of-type(1)::before {
    content: "01";
}
#contents .back_color2 .contents_box:nth-of-type(2)::before {
    content: "02";
}
#contents .back_color2 .contents_box:nth-of-type(3)::before {
    content: "03";
}
#contents h2 .svg_box {
    display: none;
}
#contents h2 {
    margin-top: -130px;
}
#contents h2 .con_title {
    position: relative;
	padding: 70px 60px;
    background-color: #fff;
    font-size: 30px;
	color: #003fbc;
}
#contents h2 .con_title::before {
	content: "About us";
	font-size: 16px;
    position: absolute;
    top: 125px;
    right: 0px;
    color: #333;
    writing-mode: horizontal-tb;
    transform: rotate(90deg);
}
#contents h2 .con_title::after {
	content: "";
	background-color: #333;
	width: 1px;
	height: 80px;
    position: absolute;
    top: 10px;
    right: 35px;
}

/* topcms */
#top_cms .cms_title .title_box {
    background-color: rgba(31,80,188,0.4);
}
#top_cms .cms_title .title_box {
    background-color: rgba(86,159,249,0.4);
}
#top_cms .cms_title .title_box h2 {
    color: white;
    border-left: 1px solid;
    border-right: 1px solid;
}
#top_cms .cms_2-a h2{
    border: 1px solid #fff;
    padding: 20px;
}
#top_cms .cms_2-a .cate_box a .bg {
    filter: blur(0);
}
#top_cms .cms_2-a .cate_box a:hover .bg {
    filter: blur(3px);
    transform: translate(-50%, -50%) scale(1.1);
}
#top_cms .page_04_title {
    position: relative;
}
#top_cms .page_04_title::after {
	content: "";
	background-color: #fff;
	width: 100%;
	height: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#top_cms .page_04_title h2 {
    display: inline-block;
    background-color: #94daf5;
    z-index: 3;
    position: relative;
}

/* footer */
.tel a{
    color: #003fbc;
}

/* under page */
#page_title h2{
    color: #fff;
    border-left: 1px solid;
    border-right: 1px solid;
}
#page_title .back_color2 {
    background-color: rgba(31,80,188,0.4);
}
.cate_list li a {
    padding: 10px;
    background-color: #83d6f7;
    border: 1px solid #83d6f7;
    color: #fff;
}
.cate_list li a:hover {
    background-color: transparent;
    color:  #83d6f7;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
#contents h2 .con_title::before {
    top: 105px;
    right: 25px;
    transform: rotate(0deg);
}
#contents .back_color2 .contents_box::before{
    padding-top: 5px;
}
#top_cms .cms_2-a h2{
    padding-left: 10px;
}
#top_cms .cms_title .title_box h2{
    padding-left: 3px;
}
.cate_list li a{
    padding-bottom: 5px;
}
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.logo {
		padding-top: 0;
	}
	#main_img .catch {
		max-width: 130px;
	}
	#contents h2 .con_title {
        padding: 45px 35px;
        font-size: 25px;
    }
    #contents h2 .con_title::before {
        font-size: 15px;
        top: 100px;
    }
    #contents h2 .con_title::after {
        height: 60px;
        top: 10px;
        right: 25px;
    }
    #contents .back_color2 .contents_box::before {
        font-size: 70px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .header_info .contact i{
        padding: 0;
        margin: 0;
    }
    .header_info .tel i{
        padding-right: 10px;
        margin: 0;
    }
	#main_img .catch {
		max-width: 80px;
	}
	#intro #intro_txt h2 {
		border-left: none;
		border-right: none;
		border-top: 1px solid;
		border-bottom: 1px solid;
		padding: 10px 0;
	}
	#intro {
		margin-top: 0;
        height: auto;
        max-height: inherit;
	}
	#contents h2 {
		margin-top: -110px;
		display: flex;
		writing-mode: vertical-rl;
	}
	#contents h2 .con_title {
		padding: 50px 40px;
		font-size: 24px;
		margin: 0 auto;
	}
	#contents h2 .con_title::before {
		font-size: 13px;
		top: 100px;
	}
	#contents h2 .con_title::after {
		height: 60px;
		top: 10px;
		right: 30px;
	}
	#contents .back_color2 .contents_box_wrap {
		margin-top: 50px;
	}
    #page_title h2{
        padding-top: 10px;
        padding-bottom: 10px;
    }
	
}

