﻿

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_color1 {color: #143599;}
.border_color1{border-color: #143599;}
.bg_color_b, .more a .more_bg, #header.headtrans .contact_bt a {background-color: #143599;}

.bg_color1, .hvr_bg_color3:hover, #header.headtrans .contact_bt a:hover {background-color: #68caef;}

.txt_color_g{color: #6dc7bb;}
.bg_color3 {background-color: #6dc7bb}
.border_color3 {border-color: #6dc7bb;}
.hvr_txt_color3:hover {color: #6dc7bb;}

.txt_color3 {color: #f3e21b;}

.bg_color2 {background-color: #f2f2f2;}

.footer_nav{background-color: #f5f5f5}
.footer_nav .txt_white{color: #333333;}
#footer{background-color: #6dc7bb;}


/* all ---------------------------------------------------------------------------------------------*/
#loader{background-color: #ffffff;}
#sp_nav .nav_bg{background: linear-gradient(to bottom right, rgb(109 199 187), rgb(109, 199, 187))!important;}
footer .bg_box{height: 400px;background-attachment: fixed!important;}


/* ヘッダー ---------------------------------------------------------------------------------------------*/
#logo a{padding: 15px 46px;width: 239px;}
#header.headtrans #logo a{padding: 10px 50px;width: 188px;}



/* top ---------------------------------------------------------------------------------------------*/
#video,#main_img{height: auto!important;max-height: 100vh;}

#main_img{position: relative}
#main_img .main_txt {
    width: 35%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}
#main_img .main_bg, #contents1 .con1_bg{
    background: linear-gradient( 90deg,#0074c1,#68caef)!important;
    opacity: 0.4;
}
#contents1 .con1_bg{opacity: 0.7;}

#intro {
    position: relative;
    background: url(../dup/img/intro_bg.jpg) left bottom / cover no-repeat;
	background-attachment: fixed;
    padding-top: 149px;
    z-index: 1;
	overflow: hidden;
}
.intro_wrap {
    background-color: rgba(255,255,255,0.72)!important;
	position: relative;
}
.intro_wrap::after {
    display: inline-block;
    content: "INTRODUCTION";
    position: absolute;
    top: -109px;
    left: 20px;
    font-size: 100px;
    font-weight: bold;
    color: rgba(255,255,255,0.54);
    z-index: -1;
}
.intro_title {
    position: relative;
    padding-bottom: 7px;
    padding-top: 13px;
    margin-bottom: 50px;
    z-index: 1;
    color: #15379c;
}
.intro_title::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 2px;
    background: #15379c;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
}

#contents3{
	background-image: url(../dup/img/con3_bg.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 40%;
	padding-top: 58px;
}
#contents3 .title_box {
    padding-left: 100px;
    padding-top: 30px;
    background: url(../dup/img/item1.png) top left / contain no-repeat;
    width: 92%;
    margin: auto;
    margin-bottom: 113px;
	box-sizing: border-box;
}
#contents3 .con3_sub_title{
	border-radius: 45px;
	border-radius: 61px;
    font-size: 16px;
    padding: 4px 24px;
	font-weight: bold;
}
#contents3 .con3_title{
	font-size: 50px;
    line-height: 1;
    padding-top: 20px;
    font-weight: bold;
    background: linear-gradient(transparent 76%, #ffff8a 60%);
    display: inline-block;
}
#contents3 .img_box{
	text-align: center;
    max-width: 1180px;
    margin: auto;
    padding-bottom: 50px;
}
#contents3 img.main{
	width: 63%;
}
#contents3 img:not(.main){
	position: absolute;
    width: 38%;
}
#contents3 img.txt_img1{
	top: 0;
    left: -11%;
}
#contents3 img.txt_img2{
	top: -14%;
    right: -3%;
}
#contents3 img.txt_img3{
    top: 35%;
    left: -3%;
    width: 27%;
}
#contents3 img.txt_img4{
	top: 20%;
	right: -6%;
	width: 26%;
}
#contents3 img.txt_img5{
    top: 77%;
    left: -7%;
    width: 40%;
}
#contents3 img.txt_img6{
    top: 71%;
    right: -4%;
    width: 31%;
    width: 33%;
}

/* top_cms / cms ---------------------------------------------------------------------------------------------*/
#top_cms .pd_t-100px {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, #f5f5f5 2px, #f5f5f5 11px );
}
#cms_2-a .box_txt1{
	border-left: 1px solid #cdcdcd;
    padding-left: 15px;
    padding-bottom: 0;
}

.cms_6-c .cate_box, #cms_6-c .cate_box{
	box-shadow: 0 10px 4px rgb(0 0 0 / 4%);
    border: 2px solid #ccc;
    border-radius: 10px;
	position: relative;
}

/* cms_5-c  */
.cms_5-c .cate_box, #cms_5-c .cate_box{
    margin-bottom: 60px;
    padding-bottom: 38px;
    border-bottom: 2px dotted #ccc;
}
.cms_5-c .box_title1, .cms_5-c .box_txt1, #cms_5-c .box_title1, #cms_5-c .box_txt1 {
    border-color: rgba(0,0,0,0.05);
    position: relative;
    padding: 0.5em;
    border-radius: 0.3em;
    margin: 0 50px 30px;
    background: #6dc7bb;
}
.cms_5-c .box_title1, #cms_5-c .box_title1{
	color: #fff;
}
.cms_5-c .box_txt1, #cms_5-c .box_txt1 {
    margin: 0 50px 30px;
    background: #fff5b8;
}
#cms_5-c .box_title1::before, #cms_5-c .box_txt1::before, .cms_5-c .box_title1::before, .cms_5-c .box_txt1::before {
    content: '';
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
}
#cms_5-c .box_title1::before, .cms_5-c .box_title1::before {
    background-image: url(./Dup/img/faq1.png);
    top: 36%;
    left: -9px;
}
#cms_5-c .box_txt1::before, .cms_5-c .box_txt1::before {
    background-image: url(./Dup/img/faq2.png);
    bottom: 0.5em;
    top: auto;
    left: auto;
    right: -17px;
}
.cms_5-c .cate_box .box_title1::after, .cms_5-c .cate_box .box_txt1::after, #cms_5-c .cate_box .box_title1::after, #cms_5-c .cate_box .box_txt1::after {
    position: absolute;
    display: inline-block;
    width: 68px;
    height: 82px;
    background-repeat: no-repeat;
    background-size: contain;
}
.cms_5-c .cate_box .box_title1::after, #cms_5-c .cate_box .box_title1::after {
    top: -0.3em;
    left: -3.7em;
    content: '';
    background-image: url(./Dup/img/faq3.png);
}
.cms_5-c .cate_box .box_txt1::after, #cms_5-c .cate_box .box_txt1::after {
    right: -5.2em;
    bottom: -1em;
    content: '';
    background-image: url(./Dup/img/faq4.png);
}


/* animation ---------------------------------------------------------------------------------------------*/
.item {
	opacity: 0;
	transition: all 1s;
}
.main.item {
    transform: scale(0.9);
	transition-delay: .3s;
}
.txt_img1.item, .txt_img3.item, .txt_img5.item   {
    transform: translateX(-50px);
	transition-delay: .5s;
}
.txt_img2.item, .txt_img4.item, .txt_img6.item   {
    transform: translateX(50px);
	transition-delay: .5s;
}
.item.start {opacity: 1;}
.main.item.start {transform: scale(1);}
.txt_img1.item.start, .txt_img3.item.start, .txt_img5.item.start,
.txt_img2.item.start, .txt_img4.item.start, .txt_img6.item.start{transform: translateX(0);}


/* under ---------------------------------------------------------------------------------------------*/
#page_title .page_title_gradient {
    background: linear-gradient(to bottom, rgba(0,0,0,0), #68caef)!important;
}



/* IE */
@media all and (-ms-high-contrast: none){
.intro_wrap::after{top: -89px;}
#contents3 .con3_title{padding-top: 27px}
#contents3 .con3_sub_title{padding: 4px 24px 1px;}
.cms_5-c .box_title1, .cms_5-c .box_txt1, #cms_5-c .box_title1, #cms_5-c .box_txt1{padding: 0.7em 0.5em 0.3em;}
}

@media screen and (max-width: 1200px){
.intro_wrap::after{top: -86px;left: 20px;font-size: 90px;}
#contents3 .con3_title{font-size: 38px;}
#contents3 .con3_sub_title{font-size: 14px;}
}
	
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#loader img{width: 200px;}
#main_img .main_txt{width: 48%;}

#intro{margin-top: -12px;}
.intro_wrap::after{top: -62px;left: 20px;font-size: 61px;}

#contents3{padding-bottom: 89px;}
#contents3 .title_box{padding-left: 88px;}
#contents3 .con3_title{font-size: 30px;}
#contents3 img.main{width: 72%;}
#contents3 img:not(.main) {width: 41%;}
#contents3 img.txt_img1 {
    top: -13%;
    left: -14%;
}
#contents3 img.txt_img2 {
    top: -19%;
    right: -6%;
}
#contents3 img.txt_img3 {
    top: 28%;
    left: -10%;
    width: 31%;
}
#contents3 img.txt_img4 {
    top: 13%;
    right: -8%;
    width: 30%;
}
#contents3 img.txt_img5 {
    top: 83%;
    left: -13%;
    width: 49%;
}
#contents3 img.txt_img6 {
    top: 73%;
    right: -4%;
    width: 40%;
}

footer .bg_box{height: 348px;background-attachment: scroll!important;}
	
.cms_5-c .cate_box .box_title1::after, .cms_5-c .cate_box .box_txt1::after, #cms_5-c .cate_box .box_title1::after, #cms_5-c .cate_box .box_txt1::after{width: 53px;}
.cms_5-c .cate_box .box_title1::after, #cms_5-c .cate_box .box_title1::after{left: -3.4em;}
.cms_5-c .cate_box .box_txt1::after, #cms_5-c .cate_box .box_txt1::after{right: -4.6em;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#loader img{width: 172px;}

#logo a{padding: 0;padding-bottom: 10px;padding-top: 10px;    width: 100px;}
#main_img .main_txt{width: 56%;display: block!important}
#intro{padding-top: 68px;background-attachment: scroll;}
.main_txt{display: none}
.intro_wrap{padding-top: 30px;}
.intro_wrap::after {
    top: -31px;
    left: 20px;
    font-size: 32px;
}

#contents3{background-position: right -23px top;background-size: 48%;padding-bottom: 123px;}
#contents3 .title_box {
	margin-bottom: 107px;
    padding-left: 48px;
    padding-top: 4px;
	background-size: 34px;
	background-position: top -1px left;
}
#contents3 .con3_title{font-size: 19px;padding-top: 13px;}
#contents3 .con3_sub_title{font-size: 11px;padding: 4px 13px;}
#contents3 .pd_r-100px.pd_l-100px{padding-left: 50px;padding-right: 50px;}	
#contents3 .img_box{
	padding-top: 109px;
}
#contents3 img.main {
	width: 96%;
}
#contents3 img:not(.main){
	width: 78%;
}
#contents3 img.txt_img1{
	top: -21%;
}
#contents3 img.txt_img2 {
    top: -4%;
    right: -13%;
}
#contents3 img.txt_img3 {
    top: 10%;
    left: -11%;
    width: 55%;
}
#contents3 img.txt_img4 {
    top: 15%;
    right: -13%;
    width: 56%;
}
#contents3 img.txt_img5 {
    top: 87%;
    left: -13%;
    width: 83%;
}
#contents3 img.txt_img6 {
    top: 105%;
    right: -10%;
    width: 71%;
}

.cms_sub_title span{font-size: 16px;font-weight: bold;color: #f3e000;}
footer .bg_box{height: 206px;}
	
.cms_6-c .cate_box, #cms_6-c .cate_box{padding: 20px;}
	
.cms_5-c .cate_box, #cms_5-c .cate_box{margin-bottom: 41px;padding-bottom: 18px;}
.cms_5-c .box_title1, .cms_5-c .box_txt1, #cms_5-c .box_title1, #cms_5-c .box_txt1{margin: 0 0 30px 40px;}
.cms_5-c .box_txt1, #cms_5-c .box_txt1{margin: 0 43px 30px 0}
.cms_5-c .cate_box .box_title1::after, .cms_5-c .cate_box .box_txt1::after, #cms_5-c .cate_box .box_title1::after, #cms_5-c .cate_box .box_txt1::after{width: 48px;}
.cms_5-c .cate_box .box_title1::after, #cms_5-c .cate_box .box_title1::after{left: -3.9em;}
.cms_5-c .cate_box .box_txt1::after, #cms_5-c .cate_box .box_txt1::after{right: -5em;width: 47px;}
}






